/* =====================================================================
   Interactive Explainers — styling (parchment / navy / gold deck)
   ===================================================================== */

:root{
  --exp-navy:#1f3556; --exp-gold:#b08c2f; --exp-gold-soft:#cba94e; --exp-ink:#322d22;
}

.explainer{
  position:relative;
  margin:26px 0;
  border:1px solid rgba(176,140,47,.5);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(120% 110% at 0% 0%, rgba(255,252,244,.9), rgba(255,252,244,0) 60%),
    linear-gradient(158deg,#faf4e6 0%, #f3e8cf 100%);
  box-shadow:0 10px 30px rgba(31,40,56,.12);
  font-family:"Calibri","Segoe UI",Arial,sans-serif;
  outline:none;
}
.explainer:focus-visible{ box-shadow:0 0 0 3px rgba(176,140,47,.45), 0 10px 30px rgba(31,40,56,.12); }

/* progress */
.exp-progress{ height:4px; background:rgba(176,140,47,.18); }
.exp-progress-bar{ height:100%; width:0; background:linear-gradient(90deg,var(--exp-gold),var(--exp-gold-soft)); transition:width .35s ease; }

/* stage + slides */
.exp-stage{ position:relative; }
.exp-slide{
  position:absolute; inset:0;
  padding:30px 40px;
  opacity:0; transform:translateY(8px);
  transition:opacity .32s ease, transform .32s ease;
  pointer-events:none;
  overflow:auto;
  display:flex; flex-direction:column;
}
.exp-slide.is-active{ opacity:1; transform:none; pointer-events:auto; }

.exp-kicker{ font-family:"Cambria",Georgia,serif; font-size:12px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--exp-gold); }
.exp-title{ font-family:"Cambria","Garamond",Georgia,serif; font-weight:700; color:var(--exp-navy);
  font-size:27px; line-height:1.1; margin:5px 0 0; }
.exp-rule{ width:60px; height:3px; margin:11px 0 14px; border-radius:2px;
  background:linear-gradient(90deg,var(--exp-gold),var(--exp-gold-soft)); }
.exp-slide-main{ flex:1 1 auto; }

.exp-bullets{ list-style:none; margin:0; padding:0; }
.exp-bullets li{ position:relative; padding-left:22px; margin-bottom:12px;
  font-family:"Cambria","Garamond",Georgia,serif; font-size:18px; line-height:1.45; color:var(--exp-ink); }
.exp-bullets li::before{ content:"\25C6"; position:absolute; left:0; top:2px; font-size:10px; color:var(--exp-gold); }
.exp-lead{ font-family:"Cambria","Garamond",Georgia,serif; font-size:19px; line-height:1.5; color:var(--exp-ink); margin:0; }

.exp-callout{ margin-top:14px; border-left:4px solid; padding:11px 14px; border-radius:4px;
  font-size:14.5px; line-height:1.4; }
.exp-callout-label{ display:block; font-family:"Cambria",Georgia,serif; font-weight:700;
  text-transform:uppercase; letter-spacing:1.6px; font-size:10.5px; margin-bottom:4px; }
.exp-callout.exp-fact{ background:#f5eccd; border-color:#b08c2f; color:#574616; }
.exp-callout.exp-fact .exp-callout-label{ color:#8a6c1e; }
.exp-callout.exp-myth{ background:#f1e1d8; border-color:#a8492f; color:#653021; }
.exp-callout.exp-myth .exp-callout-label{ color:#9c3b26; }
.exp-callout.exp-key{ background:#e9eef4; border-color:#1f3556; color:#21364f; }
.exp-callout.exp-key .exp-callout-label{ color:#1f3556; }

.exp-source{ margin-top:12px; font-family:"Cambria",Georgia,serif; font-style:italic;
  font-size:11.5px; color:#7a715a; flex:0 0 auto; }

/* cover */
.exp-cover{ align-items:center; justify-content:center; text-align:center; }
.exp-emblem{ margin-bottom:12px; }
.exp-cover-pre{ font-family:"Cambria",Georgia,serif; font-size:12px; letter-spacing:4px;
  text-transform:uppercase; color:var(--exp-gold); margin-bottom:10px; }
.exp-cover-title{ font-family:"Garamond","Cambria",Georgia,serif; font-weight:700; color:var(--exp-navy);
  font-size:33px; line-height:1.08; margin:0; max-width:80%; }
.exp-cover-sub{ font-family:"Cambria",Georgia,serif; font-style:italic; color:#5b5340;
  font-size:17px; margin:14px 0 0; max-width:78%; line-height:1.4; }
.exp-cover-hint{ margin-top:18px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#a08a55; }

/* nav */
.exp-nav{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 18px; border-top:1px solid rgba(176,140,47,.3); background:rgba(176,140,47,.06); }
.exp-prev, .exp-next{ display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(31,53,86,.3);
  background:#fff; color:var(--exp-navy); cursor:pointer; flex:0 0 auto; transition:background .15s, color .15s; }
.exp-prev:hover:not(:disabled), .exp-next:hover:not(:disabled){ background:var(--exp-navy); color:#fff; }
.exp-prev:disabled, .exp-next:disabled{ opacity:.32; cursor:default; }
.exp-dots{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; flex:1 1 auto; }
.exp-dot{ width:8px; height:8px; padding:0; border-radius:50%; border:none; cursor:pointer;
  background:rgba(31,53,86,.22); transition:background .15s, transform .15s; }
.exp-dot:hover{ background:rgba(31,53,86,.45); }
.exp-dot.is-active{ background:var(--exp-gold); transform:scale(1.3); }
.exp-counter{ position:absolute; top:14px; right:16px; font-family:"Cambria",Georgia,serif;
  font-size:11.5px; color:var(--exp-gold); letter-spacing:.5px; }

.explainer-error{ padding:18px; font-style:italic; color:#9c3b26; }

@media (max-width:560px){
  .exp-slide{ padding:22px 22px; }
  .exp-title{ font-size:23px; } .exp-cover-title{ font-size:27px; }
  .exp-bullets li{ font-size:16.5px; }
  .exp-counter{ display:none; }
}