/* The reference pages (tarot cards, numbers, signs, compatibility) and the card of each dream. */
main.ref .synth .tag { display: inline-block; margin-right: 8px; padding: 1px 9px; border: 1px solid rgba(122, 26, 31, .4); border-radius: 99px; font: 600 .78rem var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--red); vertical-align: 2px; }
main.ref .synth figure.card { float: right; width: min(38%, 230px); margin: 0 0 14px 22px; }
main.ref .synth figure.card img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 22px rgba(42, 25, 18, .35); }
main.ref .synth .words { font-style: italic; color: var(--ink-soft); font-size: 1.04rem; }
main.ref .synth .rel a, main.ref .synth .pn a, .synth .more a { color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(122, 26, 31, .35); }
main.ref .synth .rel { line-height: 1.9; }
main.ref .synth .pn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(122, 26, 31, .2); }
main.ref .synth ul.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
main.ref .synth ul.tiles a { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 10px 6px; color: var(--ink); text-decoration: none; text-align: center; border: 1px solid rgba(122, 26, 31, .22); border-radius: 8px; background: rgba(255, 250, 238, .35); transition: border-color .2s, transform .2s; }
main.ref .synth ul.tiles a:hover, main.ref .synth ul.tiles a:focus-visible { border-color: rgba(122, 26, 31, .6); transform: translateY(-2px); }
main.ref .synth ul.cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
main.ref .synth ul.cards img { width: 100%; height: auto; border-radius: 6px; }
main.ref .synth ul.cards span { font-size: .98rem; line-height: 1.2; }
main.ref .synth ul.nums, main.ref .synth ul.signs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
main.ref .synth ul.nums b, main.ref .synth ul.signs b { display: grid; place-items: center; width: 2.1em; height: 2.1em; font: 500 1.9rem/1 var(--serif); color: var(--red); border: 2px solid rgba(122, 26, 31, .45); border-radius: 50%; }
main.ref .synth ul.tiles small { color: var(--ink-soft); font-size: .92rem; }
.synth p.cardline { display: flex; gap: 16px; align-items: flex-start; }
.synth p.cardline img { width: 84px; height: auto; flex: none; border-radius: 6px; box-shadow: 0 3px 12px rgba(42, 25, 18, .3); }
@media (max-width: 560px) {
  main.ref .synth figure.card { float: none; width: 62%; margin: 0 auto 16px; }
  main.ref .synth ul.cards { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .synth p.cardline img { width: 64px; }
}