/*
 * "Exploring Witchcraft" page body — the Witch Tools landing/orientation
 * page. Pairs with shared/partials/header.php + footer.php, same as
 * content-page.css. Requires tokens.css to be loaded first.
 *
 * Source: build_docs handoff zip "Witching.org landing page.zip",
 * design_handoff_exploring_witchcraft/Exploring Witchcraft.dc.html — since
 * extended with a two-column layout (narrative left, tool cards right)
 * once the page grew a long narrative intro beyond the handoff's short
 * "Before you start" paragraph (user report, 2026-09-30: the single-
 * column version left the page mostly-empty on wide screens and pushed the
 * actual tools far down the page). .exp-article's max-width matches
 * content-page.css's .cp-article, same convention as every other prose
 * column on the site. The tool sidebar scrolls with the rest of the page
 * (not position:sticky - tried, then dropped same day per user request).
 */

.exp-main {
  flex: 1; padding: 32px clamp(24px, 5vw, 60px) 120px;
  max-width: 1200px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 56px;
}

.exp-article { display: flex; flex-direction: column; gap: 48px; }

/* User request, 2026-10-10: was a small uppercase eyebrow label
   (.exp-sidebar-label, from back when this sat above the compact tool
   sidebar) - promoted to a real heading, same weight as "Explore the
   Archive"/"Before you start" above it, now that this section is the
   page's main full-width content rather than an aside. */
.exp-tools-heading { margin: 0 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

.exp-intro { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.exp-intro h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
/* User request, 2026-10-10: these two framing sections ("Explore the
   Archive"/"Before you start") used to run in a narrow 66ch sidebar
   column (back when the tools sat in a card grid next to them); now run
   the page's own full width like the tools below, line length and all -
   a 74ch cap (narrow column, most of the row empty) and a 2-column text
   split were both tried and both rejected live. No max-width here at
   all now; paragraphs wrap at the full .exp-main measure (~1200px). */
.exp-intro p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }

/* Each tool: its existing thumbnail graphic (same SVGs the old compact
   cards used, just bigger) paired with the new long-form write-up -
   flex-basis 320px (not 0) is what makes this wrap to a stacked layout on
   narrow screens, same pattern as .exp-columns used to use and as
   content-page.css's .cp-body still does. */
.exp-tools { display: flex; flex-direction: column; }
.exp-tool {
  display: flex; flex-wrap: wrap; gap: 32px clamp(28px, 5vw, 48px);
  padding: 40px 0; border-top: 3px solid var(--card-accent, var(--rust));
}
.exp-tool:first-child { padding-top: 0; }
/* Left column: thumbnail + "Best for" stacked together, so the column
   doesn't just end as dead space once the longer write-up on the right
   runs past the thumbnail's height (user report, 2026-10-12). */
.exp-tool-left { flex: 1 1 320px; max-width: 420px; align-self: flex-start; display: flex; flex-direction: column; gap: 16px; }
.exp-tool-thumb { display: block; border-radius: 4px; overflow: hidden; transition: opacity 150ms; }
.exp-tool-thumb:hover { opacity: .85; }
.exp-tool-thumb svg { width: 100%; height: 100%; display: block; }
.exp-tool-body { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.exp-tool-body h3 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.exp-tool-body h3 a { color: var(--ink); }
.exp-tool-body h3 a:hover { color: var(--card-accent, var(--rust)); }
.exp-tool-tagline { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--card-accent, var(--rust)); }
.exp-tool-body p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }
.exp-tool-sub { font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.exp-tool-bestfor { margin: 0; font-size: 16px; line-height: 1.62; color: var(--ink-soft); }
.exp-tool-bestfor strong { color: var(--ink); }
.exp-tool-closing { margin: 0; font-size: 16px; line-height: 1.62; font-style: italic; color: var(--ink-mid); }
.exp-tool-open { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--card-accent, var(--rust)); }
.exp-tool-open:hover { color: var(--ink); }