/* Chirality tile symbols throughout Modal Path Ethics.
   Classic = Penrose P3 (Thick / Thin); Capital = Penrose P2 (Kite / Dart).
   Palette colours follow the unlocked, saved board selection.
   Site branding stays MPE gold, independent of the palette. */
:root {
  --mpe-chirality-thick-color: #cdb165;
  --mpe-chirality-thin-color: #3a7864;
  --mpe-chirality-thick-mask: url("../images/icons/thick-tile.svg");
  --mpe-chirality-thin-mask: url("../images/icons/thin-tile.svg");
}
html[data-chirality-tiles="capital"] {
  --mpe-chirality-thick-mask: url("../images/icons/kite-tile.svg");
  --mpe-chirality-thin-mask: url("../images/icons/dart-tile.svg");
}
/* P3 and P2 are both paintable as silhouettes; no hard-coded colours in article bullets. */
ul.mpe-tilelist > li.mpe-bullet-thick::before,
.mpe-bullet-trigger.mpe-bullet-trigger--thick {
  background-image: none;
  background-color: var(--mpe-chirality-thick-color);
  -webkit-mask-image: var(--mpe-chirality-thick-mask);
  mask-image: var(--mpe-chirality-thick-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
ul.mpe-tilelist > li.mpe-bullet-thin::before,
.mpe-bullet-trigger.mpe-bullet-trigger--thin {
  background-image: none;
  background-color: var(--mpe-chirality-thin-color);
  -webkit-mask-image: var(--mpe-chirality-thin-mask);
  mask-image: var(--mpe-chirality-thin-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* The article-specific Cherish Ball and specialist icons remain untouched. */
body.mpe-ludic-audit .mpe-literal-bullet.is-thick {
  background-image: none;
  background-color: var(--mpe-chirality-thick-color);
  -webkit-mask: var(--mpe-chirality-thick-mask) center / contain no-repeat;
  mask: var(--mpe-chirality-thick-mask) center / contain no-repeat;
}
body.mpe-ludic-audit .mpe-literal-bullet.is-thin {
  background-image: none;
  background-color: var(--mpe-chirality-thin-color);
  -webkit-mask: var(--mpe-chirality-thin-mask) center / contain no-repeat;
  mask: var(--mpe-chirality-thin-mask) center / contain no-repeat;
}
/* The two large homepage marks always form a matched pair for the selected game.
   Classic: gold Thick / green Thin. Capital: gold Kite / green Dart.
   Site-brand gold/green are fixed and do not inherit board palette colours. */
.home-template .mpe-site-ethics-mark,
.home-template .mpe-site-chirality-mark {
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  object-fit: contain;
  transform: none !important;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.home-template .mpe-site-ethics-mark {
  background-color: var(--mpe-gold, #eec643);
  -webkit-mask-image: var(--mpe-chirality-thick-mask);
  mask-image: var(--mpe-chirality-thick-mask);
}
.home-template .mpe-site-chirality-mark {
  background-color: var(--mpe-green, #98fb98);
  -webkit-mask-image: var(--mpe-chirality-thin-mask);
  mask-image: var(--mpe-chirality-thin-mask);
}
.home-template .mpe-home-concept-icon::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  background-color: var(--mpe-chirality-thick-color);
  -webkit-mask: var(--mpe-chirality-thick-mask) center / contain no-repeat;
  mask: var(--mpe-chirality-thick-mask) center / contain no-repeat;
}
.home-template .mpe-home-concept.is-thin .mpe-home-concept-icon::before {
  background-color: var(--mpe-chirality-thin-color);
  -webkit-mask-image: var(--mpe-chirality-thin-mask);
  mask-image: var(--mpe-chirality-thin-mask);
  transform: rotate(-7deg);
}
.home-template .mpe-home-concept-icon img[data-mpe-concept-icon] { display: none; }
/* Gold homepage placeholders follow the same Thick/Kite selection. */
.home-template .mpe-home-dart,
.home-template .mpe-gold-diamond {
  display: inline-block;
  height: 1.2rem;
  width: 1.2rem;
  background: var(--mpe-gold, #eec643);
  transform: none;
  -webkit-mask: var(--mpe-chirality-thick-mask) center / contain no-repeat;
  mask: var(--mpe-chirality-thick-mask) center / contain no-repeat;
}
.home-template .mpe-tag-post-media--empty .mpe-home-dart,
.home-template .mpe-tag-post-media--empty .mpe-gold-diamond {
  height: 2.6rem;
  width: 2.6rem;
}

/* Header brand: Classic retains Ghost's original icon and color. Capital
   substitutes a solid MPE-gold Kite. A regular home link in both modes. */
.gh-head-logo .mpe-home-icon-capital {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  background: #eec643;
  -webkit-mask: url("../images/icons/kite-tile.svg") center / contain no-repeat;
  mask: url("../images/icons/kite-tile.svg") center / contain no-repeat;
}
html[data-chirality-tiles="capital"] .gh-head-logo img { display: none !important; }
html[data-chirality-tiles="capital"] .gh-head-logo .mpe-home-icon-capital { display: block !important; }
/* Do not let specialized article themes recolor the site brand. */
html[data-chirality-tiles="capital"] .gh-head-logo .mpe-home-icon-capital { filter: none !important; }
@media (max-width: 767px) {
  .gh-head-logo .mpe-home-icon-capital { width: 36px; height: 36px; }
}

/* Article-specific icon effects must not tint the original site mark. */
html.mpe-upended-page .gh-head-logo img {filter:none!important;}