/* ============================================================
   THE ATLAS — Components
   Cards, buttons, pills, chips, eyebrows, prose, sigils.
   ============================================================ */

/* ---------- Macro-family / sub-tradition chip rows (Voices browse) ---------- */
.chip-row-sub{
  border-top:1px solid var(--ink-700);
  padding-top:var(--space-4);
  animation:subFade .5s var(--ease-out, ease) both;
}
@keyframes subFade{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.chip.chip-sm{
  font-size:.78rem; letter-spacing:.04em;
  padding:9px 14px; min-height:40px; opacity:.9;
  border-color:var(--ink-700);
}
.chip.chip-sm:hover{ opacity:1; }
.chip.chip-sm.active{ opacity:1; }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--t-eyebrow); letter-spacing:.28em;
  text-transform:uppercase; color:var(--parchment-3);
}
.eyebrow.gold{ color:var(--gold); }
.eyebrow.teal{ color:var(--teal); }

/* ---------- Headings / prose primitives ----------
   Wide geometric Chakra Petch, uppercase, confident scale (A2 direction). */
.display{ font-family:var(--font-display); font-weight:600; line-height:.9;
  letter-spacing:.01em; text-transform:uppercase; font-size:var(--t-display); color:var(--parchment); }
.h1{ font-family:var(--font-display); font-weight:600; line-height:.98;
  letter-spacing:.01em; text-transform:uppercase; font-size:var(--t-h1); color:var(--parchment); }
.h2{ font-family:var(--font-display); font-weight:500; line-height:1.04;
  letter-spacing:.01em; text-transform:uppercase; font-size:var(--t-h2); color:var(--parchment); }
.h3{ font-family:var(--font-display); font-weight:500; letter-spacing:.01em;
  text-transform:uppercase; font-size:var(--t-h3); color:var(--parchment); }
.lead{ font-family:var(--font-body); font-weight:300; font-size:var(--t-lead);
  line-height:1.62; color:var(--parchment-2); max-width:62ch; }
/* the rare italic accent stays in Fraunces serif — the one warm, human moment */
em.gold, .display em, .h1 em, .h2 em{ font-family:var(--font-serif); font-style:italic;
  font-weight:400; text-transform:none; letter-spacing:-.01em; color:var(--gold); }

/* gilt-fill underline on a key word */
.gilt{ position:relative; color:var(--gold); white-space:nowrap; }
.gilt::after{ content:""; position:absolute; left:0; bottom:-.08em; height:2px; width:100%;
  background:var(--grad-hairline); transform:scaleX(0); transform-origin:left;
  animation: giltFill 1.1s var(--ease-rise) .35s forwards; }
@keyframes giltFill{ to{ transform:scaleX(1); } }

/* ---------- Page header block (each view top) ---------- */
.page-head{ padding: clamp(56px, 9vw, 120px) 0 var(--space-7); }
.page-head .eyebrow{ margin-bottom:var(--space-4); }
.page-head .lead{ margin-top:var(--space-5); }
.page-head .count-line{ margin-top:var(--space-4); font-family:var(--font-mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-3); }
.page-head .count-line b{ color:var(--gold); font-weight:400; }

/* ---------- Links (inline, reader text) ---------- */
.ilink{ color:var(--teal); text-decoration:none; position:relative;
  background-image:linear-gradient(var(--teal),var(--teal));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition: background-size .3s var(--ease-rise), color .3s; cursor:pointer; }
.ilink:hover{ background-size:100% 1px; color:var(--teal-100); }
.ilink.gold{ color:var(--gold); background-image:linear-gradient(var(--gold),var(--gold)); }
.ilink.gold:hover{ color:var(--gold-100); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--r-md); text-decoration:none;
  transition: all .45s var(--ease-rise); background:transparent;
}
.btn-primary{ color:var(--gold); border:1px solid var(--gold-600); position:relative; overflow:hidden; }
.btn-primary::before{ content:""; position:absolute; inset:0; background:var(--grad-gold);
  opacity:0; transition:opacity .45s var(--ease-rise); z-index:0; }
.btn-primary span, .btn-primary svg{ position:relative; z-index:1; transition:color .45s; }
.btn-primary:hover{ border-color:transparent; box-shadow:0 0 30px var(--gold-glow); }
.btn-primary:hover::before{ opacity:1; }
.btn-primary:hover span, .btn-primary:hover svg{ color:var(--void); }
.btn-ghost{ color:var(--parchment-2); border:1px solid var(--ink-700); }
.btn-ghost:hover{ color:var(--parchment); border-color:var(--ink-600); }

/* ---------- Pills / tags / chips ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--ink-800); color:var(--parchment-2); border:1px solid var(--ink-700);
  text-decoration:none; transition: all .35s var(--ease-rise); cursor:pointer; line-height:1;
  white-space:nowrap;
}
.pill:hover{ border-color:var(--teal-600); color:var(--teal-100); }
.pill.gold{ color:var(--gold); } .pill.gold:hover{ border-color:var(--gold-600); }
.pill.teal{ color:var(--teal); }
.pill.static{ cursor:default; } .pill.static:hover{ border-color:var(--ink-700); color:var(--parchment-2); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill .dot.warn{ background:var(--ember); box-shadow:0 0 8px rgba(199,91,57,.6); }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* filter chips */
.chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 16px; min-height:44px; display:inline-flex; align-items:center;
  border-radius:var(--r-pill); cursor:pointer; user-select:none;
  background:var(--ink-900); color:var(--parchment-2); border:1px solid var(--ink-700);
  transition: all .35s var(--ease-rise); white-space:nowrap;
}
.chip:hover{ color:var(--parchment); border-color:var(--ink-600); }
.chip.active{ color:var(--void); background:var(--grad-gold); border-color:transparent;
  box-shadow:0 0 20px var(--gold-glow); }

/* ---------- Search input ---------- */
.field{
  width:100%; background:var(--ink-900); border:1px solid var(--ink-700);
  color:var(--parchment); font-family:var(--font-body); font-size:1rem;
  padding:15px 18px 15px 48px; border-radius:var(--r-md); outline:none;
  transition: border-color .35s, box-shadow .35s;
}
.field::placeholder{ color:var(--parchment-4); }
.field:focus{ border-color:var(--gold-600); box-shadow:0 0 0 1px var(--gold-glow), 0 0 24px var(--gold-glow); }
.field-wrap{ position:relative; }
.field-wrap svg{ position:absolute; left:17px; top:50%; transform:translateY(-50%);
  color:var(--parchment-3); pointer-events:none; }

/* ---------- Card (base) ---------- */
.card{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-lg);
  padding:var(--space-5); overflow:hidden;
  transition: transform .5s var(--ease-magnet), border-color .5s var(--ease-rise),
              box-shadow .5s var(--ease-rise), background .5s;
  will-change: transform;
}
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 transparent; transition:box-shadow .5s; }
.card:hover{ transform:translateY(-6px); background:var(--ink-800); border-color:var(--ink-600); box-shadow:var(--shadow-2); }
.card .card-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--parchment-3); margin-bottom:12px; }
.card .card-title{ font-family:var(--font-display); font-weight:600; font-size:1.22rem;
  line-height:1.16; color:var(--parchment); letter-spacing:.005em; }
.card .card-body{ color:var(--parchment-2); font-size:.95rem; line-height:1.6; margin-top:12px; }
.card .card-foot{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.card .card-sigil{ position:absolute; top:16px; right:16px; opacity:.85; }

/* Accent variants */
.card.t-truth:hover{ border-color:rgba(227,179,65,.45); box-shadow:var(--shadow-2), 0 0 34px rgba(227,179,65,.10); }
.card.t-voice:hover{ border-color:rgba(63,167,137,.45); box-shadow:var(--shadow-2), 0 0 34px rgba(63,167,137,.10); }
.card.t-practice:hover{ border-color:rgba(236,227,208,.28); box-shadow:var(--shadow-2); }
.card.t-truth .card-eyebrow{ color:var(--gold); }
.card.t-voice .card-eyebrow{ color:var(--teal); }

/* grids */
.grid{ display:grid; gap:var(--space-5); }
.grid-auto{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(360px,1fr)); }
.grid-rev{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); filter:blur(6px);
  transition: opacity var(--dur-slow) var(--ease-rise),
              transform var(--dur-slow) var(--ease-rise),
              filter var(--dur-slow) var(--ease-rise); }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; filter:none; } }

/* ---------- Sigil canvas frame ---------- */
.sigil-frame{ display:grid; place-items:center; }
.sigil-frame canvas{ display:block; filter:drop-shadow(0 0 18px var(--gold-glow)); }
.sigil-breathe{ animation: sigilBreathe var(--dur-breath) var(--ease-drift) infinite; }
@keyframes sigilBreathe{ 0%,100%{ filter:drop-shadow(0 0 14px var(--gold-glow)); }
  50%{ filter:drop-shadow(0 0 30px rgba(227,179,65,.30)); } }

/* ---------- Prose (rendered body text from JSON) ---------- */
.prose{ max-width:70ch; color:var(--parchment-2); font-size:var(--t-body); line-height:1.78; }
.prose > * + *{ margin-top:1.15em; }
.prose strong{ color:var(--parchment); font-weight:600; }
.prose em{ font-style:italic; }
.prose h4{ font-family:var(--font-display); font-weight:600; color:var(--parchment);
  font-size:1.05rem; margin-top:1.6em; letter-spacing:.04em; text-transform:uppercase; }
.prose ul,.prose ol{ padding-left:1.25em; }
.prose li{ margin-top:.5em; }
.prose li::marker{ color:var(--gold-600); }
.prose blockquote{ border-left:2px solid var(--gold-600); padding-left:1.1em; margin-left:0;
  color:var(--parchment); font-style:italic; }
/* step-lead: a bold step/stage heading lifted onto its own line, body beneath */
.prose .step-lead, .body-rich .step-lead{ margin-top:1.6em; }
.prose .step-lead:first-child, .body-rich .step-lead:first-child{ margin-top:0; }
.prose .step-lead strong, .body-rich .step-lead strong{ display:inline-block; color:var(--gold);
  font-family:var(--font-display); font-weight:600; letter-spacing:.01em; font-size:1.02em;
  margin-bottom:.35em; }
.prose .step-lead br, .body-rich .step-lead br{ line-height:1.9; }
.prose code, .prose .code-ref{ font-family:var(--font-mono); font-size:.86em; color:var(--teal-100);
  background:var(--ink-800); padding:1px 7px; border-radius:var(--r-sm); }
.prose a{ color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(63,167,137,.4); }
.prose a:hover{ color:var(--teal-100); }

/* ---------- Body-rich: comfortable long-form reading (A4) ---------- */
.body-rich{ max-width:66ch; color:var(--parchment-2); font-size:1.075rem; line-height:1.72; }
.body-rich > * + *{ margin-top:1.5em; }
.body-rich p{ margin-top:1.5em; }
/* first paragraph: SAME size/weight as body — only the drop-cap sets it apart */
.body-rich .lead-para{ margin-top:0; color:var(--parchment-2); }
/* drop-cap only on the page's opening section (.lead-in) so it stays a moment, not a tic */
.body-rich.lead-in .lead-para::first-letter{
  font-family:var(--font-serif); font-weight:400; float:left; line-height:.82;
  font-size:3.4em; padding:0.02em .12em 0 0; color:var(--gold);
  text-shadow:0 0 30px var(--gold-glow); }
/* light-touch key-term emphasis: a few words bolder, one in gold, body stays normal */
.body-rich strong.key{ color:var(--parchment); font-weight:600; }
.body-rich strong.key.gold{ color:var(--gold); font-weight:600; }
/* source **bold** stays a soft highlight */
.body-rich strong{ color:var(--parchment); font-weight:600; }
.body-rich em{ font-style:italic; color:var(--parchment); }
.body-rich h4{ font-family:var(--font-display); font-weight:600; color:var(--parchment);
  font-size:1.05rem; margin-top:1.9em; letter-spacing:.05em; text-transform:uppercase; }
.body-rich ul,.body-rich ol{ padding-left:1.3em; }
.body-rich li{ margin-top:.6em; }
.body-rich li::marker{ color:var(--gold-600); }
.body-rich blockquote{ border-left:2px solid var(--gold-600); padding-left:1.2em; margin-left:0;
  color:var(--parchment); font-style:italic; font-family:var(--font-serif); font-weight:300;
  font-size:1.2rem; line-height:1.5; }
.body-rich a{ color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(63,167,137,.4); }
.body-rich a:hover{ color:var(--teal-100); }
.body-rich a.gold,.body-rich a.ilink.gold{ color:var(--gold); border-bottom-color:rgba(227,179,65,.4); }
.body-rich .code-ref{ font-family:var(--font-mono); font-size:.86em; color:var(--teal-100);
  background:var(--ink-800); padding:1px 7px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion: reduce){ .body-rich.lead-in .lead-para::first-letter{ text-shadow:none; } }

/* ---------- Section divider rule ---------- */
.rule{ height:1px; background:var(--grad-hairline); margin:var(--space-7) 0; }
.section-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin-bottom:var(--space-5);
  display:flex; align-items:center; gap:14px; }
.section-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--ink-700), transparent); }

/* ---------- Pull quote ---------- */
.pullquote{ font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.28; color:var(--parchment);
  max-width:24ch; text-shadow:0 0 40px var(--gold-glow); }
.pullquote .attr{ display:block; margin-top:var(--space-4); font-family:var(--font-mono);
  font-style:normal; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

/* ---------- Back / prevnext nav ---------- */
.backlink{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment-3);
  text-decoration:none; transition:color .35s; margin-bottom:var(--space-5); }
.backlink:hover{ color:var(--gold); }
.backlink svg{ transition:transform .35s var(--ease-magnet); }
.backlink:hover svg{ transform:translateX(-4px); }

.prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-8); }
.prevnext a{ display:block; text-decoration:none; padding:var(--space-5); border:1px solid var(--ink-700);
  border-radius:var(--r-lg); background:var(--ink-900); transition:all .45s var(--ease-rise); }
.prevnext a:hover{ border-color:var(--gold-600); background:var(--ink-800); }
.prevnext .pn-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--parchment-3); }
.prevnext .pn-title{ font-family:var(--font-display); font-size:1.1rem; color:var(--parchment); margin-top:8px; line-height:1.15; }
.prevnext .next{ text-align:right; }
@media (max-width:640px){ .prevnext{ grid-template-columns:1fr; } }

/* ---------- Media link list ---------- */
.media-link{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--ink-900); border:1px solid var(--ink-700); text-decoration:none; color:inherit;
  transition:all .4s var(--ease-rise); }
.media-link:hover{ border-color:var(--teal-600); background:var(--ink-800); transform:translateX(4px); }
.media-link .mtype{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); border:1px solid var(--teal-600); padding:4px 9px; border-radius:var(--r-pill); flex-shrink:0; }
.media-link .mtitle{ color:var(--parchment); font-size:.95rem; line-height:1.3; }
.media-link .msrc{ font-family:var(--font-mono); font-size:10.5px; color:var(--parchment-3); margin-top:3px; letter-spacing:.06em; }
.media-link .mgo{ margin-left:auto; color:var(--parchment-3); flex-shrink:0; transition:color .3s; }
.media-link:hover .mgo{ color:var(--teal); }

/* ---------- Empty / not found ---------- */
.notfound{ min-height:54vh; display:grid; place-items:center; text-align:center; }
.notfound .h1{ margin:var(--space-5) 0; }

/* magnetic helper applied via JS sets --mx/--my */
.magnetic{ transition: transform .5s var(--ease-drift); }