/* Public tarot encyclopedia. Scoped to avoid changing existing site templates. */
.tc-root{color:#352d3c;line-height:1.95}
.tc-root .tc-lead{font-size:16px;color:#554b59;margin-bottom:16px}
.tc-root .tc-count{display:inline-block;background:#f0e9f3;border-radius:10px;padding:8px 14px;color:#5a366c;font-weight:bold;margin:0 0 18px}
.tc-root .tc-search-label{display:block;font-weight:bold;margin:16px 0 7px}
.tc-root .tc-query{display:block;width:100%;border:1px solid #d9c9df;border-radius:12px;padding:13px 15px;font:inherit;background:#fff;box-sizing:border-box}
.tc-root .tc-query:focus-visible{outline:3px solid #d3afd9;outline-offset:3px}
.tc-root .tc-filtercount{color:#685773;font-size:13px;margin:9px 0}
.tc-root .tc-category{margin:26px 0 36px}
.tc-root h2{font-size:clamp(20px,2.6vw,27px);line-height:1.55;margin:22px 0 13px;color:#4d325a}
.tc-root .tc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.tc-root .tc-card{display:flex;flex-direction:column;align-items:center;gap:5px;background:#fff;border:1px solid #e6dbe7;border-radius:13px;padding:12px 8px;text-align:center;min-width:0;transition:border-color .2s,box-shadow .2s;color:#473253;text-decoration:none}
.tc-root .tc-card:hover,.tc-root .tc-card:focus-visible{border-color:#9f77ac;box-shadow:0 5px 20px #5d32731a;text-decoration:none}
.tc-root .tc-card[hidden]{display:none}
.tc-root .tc-card-art{display:grid;place-items:center;width:100%;height:130px;background:#f5eff5;border-radius:8px;overflow:hidden;color:#87559b;font-size:38px}
.tc-root .tc-card-art img{height:100%;width:auto;max-width:100%;object-fit:contain}
.tc-root .tc-card strong{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.tc-root .tc-card small{font-size:11px;color:#89768e}
.tc-root .tc-intro{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:start;gap:23px;margin:4px 0 26px}
.tc-root .tc-cover{width:100%;max-width:220px;height:auto;max-height:365px;object-fit:contain;border-radius:10px;box-shadow:0 5px 21px #2a19342b}
.tc-root .tc-placeholder{display:grid;place-items:center;background:#f3eaf2;min-height:290px;font-size:80px;color:#775b83}
.tc-root .tc-intro-copy{min-width:0}
.tc-root .tc-kicker{color:#8b5b3c;font-weight:bold;margin:0 0 4px}
.tc-root .tc-english{color:#8b7f90;font-size:14px;margin:0 0 12px}
.tc-root .tc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}
.tc-root .tc-tags span{padding:4px 10px;border-radius:16px;background:#f4ecf6;font-size:12px;color:#5a4163}
.tc-root .tc-primary-link{display:inline-block;background:#6d4a7d;color:white;border-radius:10px;font-size:14px;font-weight:bold;padding:10px 15px;text-decoration:none}
.tc-root .tc-section{border-top:1px solid #eee4ef;padding:8px 0 12px;scroll-margin-top:20px}
.tc-root .tc-section p{overflow-wrap:anywhere;white-space:normal}
.tc-root .tc-sound{background:#fbf6fc;border:1px solid #eee0ef;border-radius:13px;padding:13px 18px;margin:19px 0}
.tc-root .tc-sound h2{margin:0 0 4px}
.tc-root audio{display:block;width:100%;max-width:430px;margin:10px 0}
.tc-root .tc-modes{border-radius:15px;background:#fcf7ff;border:1px solid #e5d7ed;padding:17px;margin:32px 0}
.tc-root .tc-modes h2{margin:0 0 7px}
.tc-root .tc-modes p{font-size:14px;color:#695874}
.tc-root .tc-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:15px 0 0}
.tc-root .tc-links a{display:flex;align-items:center;justify-content:space-between;gap:6px;border-radius:9px;background:#fff;border:1px solid #eaddeb;color:#5b376a;text-decoration:none;font-weight:bold;font-size:14px;padding:9px 12px}
.tc-root .tc-links a:hover{background:#f3eaf8;text-decoration:none}
.tc-root .tc-links small{font-size:11px;white-space:nowrap;color:#927b98}
.tc-root .tc-extra{margin-top:13px}
.tc-root .tc-extra summary{cursor:pointer;font-weight:bold;color:#644075}
.tc-root .tc-neighbors{display:flex;gap:9px;flex-wrap:wrap}
.tc-root .tc-neighbors a{background:#f1e8f4;border-radius:7px;padding:8px 11px}
.tc-root .tc-disclaimer{margin:30px 0 0;background:#f8f4f6;border-radius:11px;padding:12px 15px;font-size:12px;color:#6b6370}
@media(max-width:800px){.tc-root .tc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.tc-root .tc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tc-root .tc-intro{grid-template-columns:1fr}.tc-root .tc-cover{max-width:170px;max-height:260px;margin:0 auto}.tc-root .tc-links{grid-template-columns:1fr}.tc-root .tc-card-art{height:125px}}
@media(prefers-reduced-motion:reduce){.tc-root .tc-card{transition:none}}

/* v9: portrait artwork, same proportions as printed tarot cards. */
.tc-root .tc-card-art{width:100%;height:auto;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px;box-sizing:border-box}
.tc-root .tc-card-art img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center}
@supports not (aspect-ratio:2/3){.tc-root .tc-card-art{height:220px}}
@media(max-width:480px){.tc-root .tc-card-art{height:auto;aspect-ratio:2/3}.tc-root .tc-card{padding:10px 8px}}

/* v11: optional symbolic properties; the main interpretation remains uncluttered. */
.tc-root .tc-symbolic{margin:25px 0;padding:13px 17px;border:1px solid #eadfec;background:#fcf8ff;border-radius:12px}
.tc-root .tc-symbolic summary{cursor:pointer;font-size:15px;font-weight:700;color:#5b3969}
.tc-root .tc-symbolic p{font-size:12px;color:#806f86;margin:11px 0}
.tc-root .tc-symbolic dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:13px 0 1px}
.tc-root .tc-symbolic dl>div{background:#fff;border-radius:8px;padding:7px 10px;min-width:0}
.tc-root .tc-symbolic dt{font-size:12px;color:#776180}
.tc-root .tc-symbolic dd{margin:0;font-size:14px;color:#3e3444;font-weight:700;overflow-wrap:anywhere}
@media(max-width:460px){.tc-root .tc-symbolic dl{grid-template-columns:1fr}}

/* v20: show names from both original content fields rather than card ordinals. */
.tc-root .tc-card-title-fa{
    display:block;
    font-size:clamp(15px,1.55vw,18px);
    line-height:1.6;
    font-weight:800;
    color:#43214f;
    overflow-wrap:anywhere;
}
.tc-root .tc-card-title-en{
    display:block;
    font-size:12px;
    line-height:1.55;
    font-weight:500;
    color:#756481;
    overflow-wrap:anywhere;
    direction:ltr;
    unicode-bidi:isolate;
}
@media(max-width:480px){
    .tc-root .tc-card-title-fa{font-size:16px}
    .tc-root .tc-card-title-en{font-size:11.5px}
}