/* TP-VERSION: 1.0.1 — Crystals (Cauldron dark mode). Builds on .cauldron-wrap, .pill, .tarot-card-header in style.css. */
.crystal-single, .crystal-archive { max-width: 680px; margin: 0 auto; }
.crystal-archive { max-width: 960px; }
.crystal-header { text-align: center; }
.crystal-header .tarot-card-image img { max-width: 220px; }
.crystal-pill-link { text-decoration: none; }
.crystal-pill-link:hover { background: #B8783A; color: #1F3024; }

.crystal-section h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: #EDE6D8; margin: 28px 0 8px; }
.crystal-section p { font-size: 15px; line-height: 1.7; color: #EDE6D8; margin: 0 0 14px; }
.crystal-note { font-size: 13px !important; opacity: .65; font-style: italic; }

/* Oxblood wash + stripe, never Oxblood text on Ink Green */
.crystal-safety { border-left: 2px solid #6B2E2A; background: rgba(107, 46, 42, .18); padding: 14px 18px; margin: 4px 0 8px; }
.crystal-safety h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: #EDE6D8; margin: 0 0 8px; }
.crystal-safety ul { margin: 0 0 8px; padding-left: 18px; }
.crystal-safety li { font-size: 14px; line-height: 1.6; color: #EDE6D8; }
.crystal-safety p { font-size: 14px; line-height: 1.6; color: #EDE6D8; opacity: .85; margin: 0; }

.crystal-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; margin: 0; padding: 14px 16px; border: 1px solid #3D5A45; }
.crystal-props dt { font-family: 'IBM Plex Mono', monospace; font-style: italic; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #EDE6D8; opacity: .6; margin-bottom: 3px; }
.crystal-props dd { margin: 0; font-size: 14px; color: #EDE6D8; }

.crystal-sources { list-style: none; margin: 0 0 14px; padding: 0; }
.crystal-sources li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #3D5A45; font-size: 15px; }
.crystal-sources span { font-family: 'IBM Plex Mono', monospace; font-style: italic; font-size: 12px; opacity: .6; }

.crystal-links h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 15px; color: #EDE6D8; margin: 18px 0 4px; }
.crystal-links-label { font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 8px 0 6px !important; }
.crystal-chips { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crystal-chips a { display: inline-block; font-size: 13px; padding: 4px 12px; border: 1px solid #3D5A45; border-radius: 20px; color: #EDE6D8; text-decoration: none; }
.crystal-chips a:hover { border-color: #B8783A; color: #B8783A; }

.crystal-back { margin-top: 36px; font-size: 14px; }
.crystal-back a { color: #B8783A; }

/* Archive */
.crystal-lede { text-align: center; font-size: 15px; line-height: 1.6; max-width: 56ch; margin: 0 auto 22px; opacity: .85; }
.crystal-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.crystal-filter a { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border: 1px solid #3D5A45; border-radius: 20px; color: #EDE6D8; text-decoration: none; }
.crystal-filter a:hover { border-color: #B8783A; }
.crystal-filter a.is-current { background: #B8783A; border-color: #B8783A; color: #1F3024; font-weight: 500; }
.crystal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.crystal-tile { border: 1px solid #3D5A45; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.crystal-tile:hover { border-color: #B8783A; }
.crystal-tile a { text-decoration: none; color: #EDE6D8; display: flex; flex-direction: column; gap: 6px; }
.crystal-tile-img img { width: 100%; height: auto; display: block; }
.crystal-tile-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; }
.crystal-tile-meta { font-family: 'IBM Plex Mono', monospace; font-style: italic; font-size: 12px; opacity: .6; }
.crystal-tile-pills { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 480px) { .crystal-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .crystal-tile { padding: 12px; } }