/* Qabalah section: the painted Tree of Life and the sephirah / path pages. Builds on style.css. */
.he { font-family: "Frank Ruhl Libre", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif; font-weight: 500; }

/* The Tree */
.tree-panel { margin: 1.5rem auto 0; padding: 0; max-width: 520px; }
.tree { display: block; width: 100%; height: auto; overflow: visible; }
.tree text { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tree a { cursor: pointer; outline: none; }
.t-path-line { stroke-width: 15; stroke-linecap: butt; }
.t-path-edge { stroke: rgba(0, 0, 0, .35); stroke-width: 18; }
.t-letter { font: 500 14px "Frank Ruhl Libre", serif; }
.t-ring { stroke: rgba(0, 0, 0, .55); stroke-width: 1.5; }
.t-heb { font: 500 17px "Frank Ruhl Libre", serif; }
.t-god { font: 400 8.5px "Frank Ruhl Libre", serif; opacity: .9; }
.t-eng { font: 500 7.5px "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.t-daath { fill: rgba(185, 168, 216, .45); stroke: #5b4a78; stroke-width: 1.5; stroke-dasharray: 4 3; }
.daath .t-heb { fill: #2b1d40; font-size: 14px; }
.tree a:hover .t-ring, .tree a:focus .t-ring, .tree a:hover .t-daath, .tree a:focus .t-daath { stroke: var(--text); stroke-width: 3.5; }
.tree a:hover .t-path-edge, .tree a:focus .t-path-edge { stroke: var(--text); stroke-width: 20; }
.tree a .t-q, .tree a .t-ring { transition: filter .15s; }
.tree a:hover .t-q, .tree a:hover .t-ring { filter: brightness(1.12); }
/* on sub-pages: dim everything but the current sphere or path */
.tree.has-current a:not(.current) { opacity: .25; }
.tree.has-current a:not(.current):hover { opacity: .8; }
.tree.has-current a.current .t-ring, .tree.has-current a.current .t-daath { stroke: var(--text); stroke-width: 3.5; }
.tree.has-current a.current .t-path-edge { stroke: var(--text); stroke-width: 21; }
.tree-note { color: var(--muted); font-size: .88rem; text-align: center; max-width: 34rem; margin: 1rem auto 0; }

.q-index { margin: 2.5rem 0 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.q-index summary { cursor: pointer; color: var(--accent); }
.q-index-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; margin-top: 1rem; }
.q-index h2 { font-size: 1.5rem; }
.q-index ul { list-style: none; padding: 0; margin: 0; }
.q-index li { padding: .35rem 0; border-top: 1px solid var(--line); font-size: .93rem; }
.q-index li span { display: block; color: var(--muted); font-size: .82rem; }
.q-index li .he, .q-links .he { display: inline-block; min-width: 1.4em; color: var(--clay); }

/* Sub-pages */
.crumbs { margin: 1.5rem 0 0; font-size: .9rem; }
.crumbs a { text-decoration: none; }
.q-head { display: grid; grid-template-columns: 1fr 200px; gap: 2rem; align-items: center; padding: 1.5rem 0 1rem; }
.q-kicker { margin: 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); }
.q-big { margin: .3rem 0 0; font-size: clamp(3.5rem, 12vw, 5.5rem); line-height: 1; color: var(--text); }
.q-head h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin: .4rem 0 .2rem; }
.q-sub { margin: 0; color: var(--muted); font-size: 1.05rem; }
.q-mini { margin: 0; }
.ys { margin: 1.5rem 0 0; padding: 1.2rem 1.5rem; background: var(--card); border-left: 3px solid var(--clay); }
.ys p { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; font-style: italic; }
.ys cite { display: block; margin-top: .6rem; font-style: normal; font-size: .82rem; color: var(--muted); }
.q-sec { padding-top: 2.5rem; }
.q-sec > h2 { font-size: 1.9rem; }
.q-sec p { max-width: 42rem; }
.corr { margin: 1rem 0 0; }
.corr > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1.25rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.corr dt { font-family: var(--serif); font-size: 1.05rem; color: var(--accent); line-height: 1.4; }
.corr dd { margin: 0; font-size: .95rem; }
.corr dd small { color: var(--muted); }
.corr .he { font-size: 1.15em; color: var(--clay); }
.q-links { list-style: none; padding: 0; margin: 1rem 0 0; }
.q-links li { padding: .5rem 0; border-top: 1px solid var(--line); }
.q-links a { text-decoration: none; }
.q-books { list-style: none; padding: 0; margin: 1rem 0 0; columns: 2 18rem; column-gap: 2rem; }
.q-books li { break-inside: avoid; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .93rem; }
.q-books span { display: block; color: var(--muted); font-size: .82rem; }
.note { color: var(--muted); font-size: .88rem; }
.q-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .95rem; }
.q-pager a { text-decoration: none; }
.table-wrap { overflow-x: auto; }

@media (max-width: 640px) {
  .q-head { grid-template-columns: 1fr 110px; gap: 1rem; }
  .corr > div { grid-template-columns: 1fr; gap: .1rem; }
  .q-index-cols { grid-template-columns: 1fr; }
}

/* The three veils above Kether */
.t-veil-band { fill: none; stroke-width: 17; }
.t-veil-edge { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 19; }
.tree .t-veil-heb { font: 500 10.5px "Frank Ruhl Libre", serif; text-anchor: end; }
.tree .t-veil-eng { font: 500 6.5px "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; text-anchor: start; }
.tree a:hover .t-veil-edge, .tree a:focus .t-veil-edge, .tree.has-current a.current .t-veil-edge { stroke: var(--text); stroke-width: 21; }
.veil h2 .he { color: var(--clay); margin-right: .3rem; }
.veil { scroll-margin-top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Links into the Tarot section */
.q-card { display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; align-items: center; }
.q-card img { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 4px 14px rgba(46, 42, 36, .18); }
.q-card h2 { font-size: 1.9rem; }
.q-card p { margin: .3rem 0; }
.q-card small { color: var(--muted); }
a.xref { text-decoration-style: dotted; }