/* how-to-read-tarot.php: the tarot reading guide. Colours are tokens, so the forest theme's light band restyles it; the forest
   titles are in themes/forest.css ("TAROT GUIDE"). */
.tg-wrap { max-width: 980px; margin: 0 auto; padding: 48px 24px 80px; }

.tg-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); }
.tg-crumbs li + li::before { content: '\203A'; margin-right: 6px; }

.tg-head { text-align: left; padding: 6px 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }   /* styles.css pads every <header> */
.tg-name { margin: 0 0 10px; font-family: var(--font-heading); font-size: calc(2rem * var(--text-scale)); line-height: 1.2; color: var(--gold); }
.tg-lead { margin: 0; max-width: 62ch; font-size: calc(1.0625rem * var(--text-scale)); line-height: 1.65; color: var(--frost); }

.tg-sec { max-width: none; margin: 0 0 48px; padding: 0; }   /* styles.css boxes every <section> */
.tg-sec p, .tg-list { font-size: calc(1rem * var(--text-scale)); line-height: 1.75; color: var(--frost); }
.tg-sec p { margin: 0 0 16px; }
.tg-title { margin: 0 0 18px; font-family: var(--font-heading); font-weight: 400; font-size: calc(1.25rem * var(--text-scale)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.tg-sub { margin: 28px 0 10px; font-family: var(--font-heading); font-weight: 400; font-size: calc(1.0625rem * var(--text-scale)); color: var(--gold); }
.tg-aside { font-style: italic; }

.tg-quote { margin: 0 0 18px; padding: 12px 18px; border-left: 3px solid var(--gold); background: rgba(var(--gold-rgb), 0.08); border-radius: 0 var(--card-radius-sm, 4px) var(--card-radius-sm, 4px) 0; font-size: calc(1rem * var(--text-scale)); line-height: 1.7; font-style: italic; color: var(--bone); }
.tg-quote p { margin: 0 0 6px; color: inherit; }
.tg-quote p:last-child { margin-bottom: 0; }

.tg-list { max-width: 70ch; margin: 0 0 18px; padding-left: 1.4em; }
.tg-list li { margin: 0 0 6px; }

.tg-tablewrap { margin: 0 0 20px; overflow-x: auto; }
.tg-table { width: 100%; border-collapse: collapse; font-size: calc(0.9375rem * var(--text-scale)); line-height: 1.5; color: var(--frost); }
.tg-table th, .tg-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tg-table thead th { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: calc(0.75rem * var(--text-scale)); color: var(--gold); border-bottom-color: var(--gold); }
.tg-table tbody th { font-weight: 600; color: var(--bone); white-space: nowrap; }
.tg-table--wide tbody th { white-space: normal; width: 24%; font-weight: 600; font-style: italic; }
.tg-table--wide td:nth-child(2) { width: 34%; }
.tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tg-fig { margin: 8px 0 28px; }
.tg-fig img { display: block; width: 100%; height: auto; border-radius: var(--card-radius-lg, 8px); border: 1px solid var(--line); }
.tg-fig figcaption { margin-top: 8px; font-size: calc(0.8125rem * var(--text-scale)); font-style: italic; color: var(--frost); }
.tg-todo { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 180px; padding: 20px; text-align: center; border: 2px dashed var(--gold); border-radius: var(--card-radius-lg, 8px); background: rgba(var(--gold-rgb), 0.06); font-size: calc(0.9375rem * var(--text-scale)); color: var(--bone); }
.tg-todo span { font-size: calc(0.75rem * var(--text-scale)); color: var(--frost); }

.tg-cta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.tg-btn { display: inline-block; padding: 11px 22px; border: 1px solid var(--gold); border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-text); text-decoration: none; font-weight: 600; }
.tg-btn:hover { background: var(--btn-hover-bg); color: var(--btn-text); }
.tg-link { color: var(--gold); }

@media (max-width: 600px) {
  .tg-wrap { padding: 28px 16px 56px; }
  .tg-name { font-size: calc(1.625rem * var(--text-scale)); }
}

/* how-to-choose-a-tarot-spread.php: the live list of readings */
.tg-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 0 0 16px; }
.tg-pick { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--card-radius, 8px); background: var(--card-bg, transparent); }
.tg-pick-name { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 400; font-size: calc(1.125rem * var(--text-scale)); }
.tg-pick-count { margin: 0 0 10px; font-size: calc(0.75rem * var(--text-scale)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.tg-sec .tg-pick-text { margin: 0 0 12px; font-size: calc(0.9375rem * var(--text-scale)); line-height: 1.6; }
.tg-pick-pos { margin: 0 0 12px; font-size: calc(0.875rem * var(--text-scale)); color: var(--frost); }
.tg-pick-pos summary { cursor: pointer; color: var(--gold); }
.tg-pick-list { margin: 8px 0 0; padding-left: 1.4em; line-height: 1.6; }
.tg-pick-label { margin: 0 0 4px; font-size: calc(0.75rem * var(--text-scale)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.tg-pick-plans { margin: 0 0 8px; padding-left: 1.2em; font-size: calc(0.875rem * var(--text-scale)); line-height: 1.6; color: var(--frost); }
.tg-sec .tg-pick-none, .tg-sec .tg-pick-price { margin: 0 0 6px; font-size: calc(0.875rem * var(--text-scale)); color: var(--frost); }
.tg-sec .tg-pick-price { color: var(--bone); font-weight: 600; }
.tg-sec .tg-note { font-size: calc(0.8125rem * var(--text-scale)); font-style: italic; }
.tg-sec .tg-pick-more { margin: 6px 0 0; font-size: calc(0.8125rem * var(--text-scale)); font-style: italic; }

/* how-to-keep-a-tarot-journal.php: the copyable template and the example entries */
.tg-template { margin: 0 0 14px; padding: 18px 22px; overflow-x: auto; white-space: pre-wrap; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--card-radius-sm, 4px); background: rgba(var(--gold-rgb), 0.06); font-family: var(--font-body); font-size: calc(0.9375rem * var(--text-scale)); line-height: 1.7; color: var(--bone); }
.tg-copystatus { font-size: calc(0.875rem * var(--text-scale)); font-style: italic; color: var(--frost); }
.tg-entry { margin: 0 0 20px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--card-radius, 8px); background: var(--card-bg, transparent); }
.tg-entry dl { margin: 0; }
.tg-entry dt { margin: 14px 0 2px; font-size: calc(0.75rem * var(--text-scale)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.tg-entry dt:first-child { margin-top: 0; }
.tg-entry dd { margin: 0; font-size: calc(1rem * var(--text-scale)); line-height: 1.65; color: var(--bone); }

/* understanding-tarot-court-cards.php: the 4 x 4 court table */
.tg-table--grid { min-width: 720px; table-layout: fixed; }
.tg-table--grid td { padding: 12px 12px; }
.tg-table--grid td a { display: block; font-weight: 600; }
.tg-cell-fig { display: block; margin-top: 2px; font-size: calc(0.75rem * var(--text-scale)); letter-spacing: 0.04em; font-style: italic; color: var(--gold); }
.tg-cell-kw { display: block; margin-top: 4px; font-size: calc(0.8125rem * var(--text-scale)); line-height: 1.45; color: var(--frost); }

/* understanding-tarot-suits.php: the five-column suit comparison */
.tg-table--suits { min-width: 860px; }
.tg-table--suits tbody th { white-space: normal; width: 9%; }
.tg-table--suits td { width: 22%; }

/* how-to-read-tarot.php: the contents box and the "Keep exploring" cards */
.tg-toc { margin: 8px 0 22px; padding: 18px 22px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--card-radius-sm, 4px); background: var(--card-bg, transparent); }
.tg-sec .tg-toc-title { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 400; font-size: calc(0.8125rem * var(--text-scale)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.tg-toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 32px; font-size: calc(1rem * var(--text-scale)); line-height: 1.9; }
.tg-toc li { break-inside: avoid; }
.tg-more .tg-pick-name a { text-decoration: none; }
.tg-more .tg-pick-name a:hover { text-decoration: underline; }
.tg-more .tg-pick-text { margin: 0; }
@media (max-width: 600px) { .tg-toc ol { columns: 1; } }

/* how-to-read-tarot.php: the combined page (guides_page.php). The guides follow each other inside .tg-guides */
.tg-top { padding-bottom: 0; }
.tg-toc-title + ol + .tg-toc-title { margin-top: 18px; }
.tg-guides { padding-top: 0; }
.tg-guide { margin: 0 0 64px; scroll-margin-top: 90px; }
.tg-guide + .tg-guide { padding-top: 56px; border-top: 1px solid var(--line); }
.tg-guide > .tg-head { margin-bottom: 24px; }
.about-section[id] { scroll-margin-top: 90px; }