/* The ink marks, written by scripts/build-site.mjs. Where the browser takes a
   CSS mask, each mark is the ink token seen through its PNG, so it follows
   dark mode; elsewhere the <img> inside shows the PNG itself. No colour here
   but var(--ink). */
.mark, .rule-leaf, .cup-empty { display: block; flex: none; }
.mark img, .rule-leaf img, .cup-empty img { display: block; width: 100%; height: 100%; }
@media (prefers-color-scheme: dark) {
  .mark img, .rule-leaf img, .cup-empty img { filter: invert(1); }
}
@supports (mask-size: contain) or (-webkit-mask-size: contain) {
  .mark, .rule-leaf, .cup-empty {
    background-color: var(--ink);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .mark img, .rule-leaf img, .cup-empty img { visibility: hidden; }
  .mark-green { -webkit-mask-image: url("marks/mark-green.png"); mask-image: url("marks/mark-green.png"); }
  .mark-black { -webkit-mask-image: url("marks/mark-black.png"); mask-image: url("marks/mark-black.png"); }
  .mark-herbal { -webkit-mask-image: url("marks/mark-herbal.png"); mask-image: url("marks/mark-herbal.png"); }
  .mark-oolong { -webkit-mask-image: url("marks/mark-oolong.png"); mask-image: url("marks/mark-oolong.png"); }
  .mark-puerh { -webkit-mask-image: url("marks/mark-puerh.png"); mask-image: url("marks/mark-puerh.png"); }
  .mark-white { -webkit-mask-image: url("marks/mark-white.png"); mask-image: url("marks/mark-white.png"); }
  .rule-leaf { -webkit-mask-image: url("marks/rule-leaf.png"); mask-image: url("marks/rule-leaf.png"); }
  .cup-empty { -webkit-mask-image: url("marks/cup-empty.png"); mask-image: url("marks/cup-empty.png"); }
}

/* Sizes and places. */
.mark { width: 40px; height: 40px; align-self: center; }
.index-head .family-name { display: flex; align-items: center; gap: 20px; }
.index-head .family-name .mark { width: 72px; height: 72px; }
.opener .family-name { display: inline-flex; align-items: center; gap: 10px; }
.rule-leaf { width: 240px; max-width: 100%; aspect-ratio: 1200 / 101; height: auto; margin: 40px auto 0; }
.rule-leaf + .closing { margin-top: 24px; }
.cup-empty { width: 160px; height: 160px; margin: 28px 0 8px; }