/* ============================================================
   XRPL Home — The Hearth : article stylesheet
   Shared by every /hearth-*.html article page.
   Tokens match the live XRPLHome.io build.
   ============================================================ */
:root{
  --bg:#060818;
  --grad-blue:#3B82F6; --grad-violet:#8B5CF6; --grad-fuchsia:#D946EF;
  --grad: linear-gradient(135deg, var(--grad-blue) 0%, var(--grad-violet) 52%, var(--grad-fuchsia) 100%);
  --text:#F4F6FF; --text-dim:#C8D0E8; --text-faint:#8A91B4;
  --card-bg: rgba(15,18,36,0.72); --card-border: rgba(139,92,246,0.35);
  --radius: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 80% at 20% -10%, rgba(59,130,246,0.14) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(90% 60% at 85% 5%, rgba(139,92,246,0.12) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(70% 50% at 50% 100%, rgba(217,70,239,0.08) 0%, rgba(0,0,0,0) 45%);
  background-attachment:fixed;
  color:var(--text); font-family:'Poppins','Outfit',system-ui,sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:'Poppins','Space Grotesk',system-ui,sans-serif;margin:0;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(6,8,24,0.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,0.06);}
.headbar{display:flex;align-items:center;gap:28px;padding:14px 24px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;white-space:nowrap;}
.brand img{height:26px;width:auto;display:block;}
nav.primary{display:flex;align-items:center;gap:22px;flex:1;font-size:13.5px;font-weight:600;color:var(--text-dim);}
nav.primary a{padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s, border-color .15s;}
nav.primary a:hover{color:#fff;}
nav.primary a.active{color:#fff;border-color:var(--grad-violet);}
.head-actions{display:flex;align-items:center;gap:12px;margin-left:auto;}
.search-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:999px;padding:8px 14px;font-size:12.5px;color:var(--text-faint);min-width:180px;}

/* ---------- article hero ---------- */
.article-hero{padding:38px 24px 6px;}
.crumbs{font-size:12px;color:var(--text-faint);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.crumbs a:hover{color:var(--text-dim);}
.crumbs span.sep{opacity:.45;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);background:rgba(139,92,246,0.12);border:1px solid var(--card-border);padding:6px 12px;border-radius:999px;margin-bottom:16px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--grad);}
h1.title{font-size:40px;font-weight:800;letter-spacing:-0.015em;max-width:820px;line-height:1.12;}
h1.title .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.dek{margin-top:16px;font-size:17px;color:var(--text-dim);max-width:660px;line-height:1.55;}
.meta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:20px;font-size:12.5px;color:var(--text-faint);}
.meta-row .chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:999px;padding:6px 12px;font-weight:600;color:var(--text-dim);}
.meta-row .chip.dood{background:rgba(217,70,239,0.12);border-color:rgba(217,70,239,0.35);}

/* ---------- layout ---------- */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:40px;padding:30px 24px 70px;max-width:1180px;margin:0 auto;align-items:start;}

/* ---------- prose ---------- */
.prose{max-width:760px;font-size:16px;line-height:1.72;color:#E4E9FA;}
.prose > *:first-child{margin-top:0;}
.prose p{margin:0 0 18px;}
.prose h2{font-size:24px;font-weight:700;margin:40px 0 6px;letter-spacing:-0.01em;}
.prose h2::after{content:"";display:block;width:52px;height:3px;border-radius:2px;background:var(--grad);margin-top:12px;margin-bottom:14px;}
.prose h3{font-size:17.5px;font-weight:700;margin:28px 0 10px;color:#fff;}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;}
.prose li{margin:0 0 9px;}
.prose li::marker{color:var(--grad-violet);}
.prose strong{color:#fff;font-weight:700;}
.prose em{color:var(--text-dim);}
.prose a{color:#9BC0FF;border-bottom:1px solid rgba(155,192,255,0.35);}
.prose a:hover{color:#fff;border-bottom-color:#fff;}
.prose hr{border:0;border-top:1px solid rgba(255,255,255,0.08);margin:34px 0;}
.prose code{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.09);border-radius:5px;padding:1px 6px;font-size:13.5px;}

/* callouts */
.prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--grad-fuchsia);background:rgba(217,70,239,0.07);border-radius:0 10px 10px 0;font-style:italic;color:var(--text-dim);}
.prose blockquote p:last-child{margin-bottom:0;}
.callout{margin:26px 0;padding:18px 20px;border:1px solid var(--card-border);background:var(--card-bg);border-radius:var(--radius);backdrop-filter:blur(12px);}
.callout .callout-title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:#fff;margin-bottom:8px;letter-spacing:.01em;}
.callout p:last-child, .callout ul:last-child{margin-bottom:0;}
.callout.tip{border-color:rgba(59,130,246,0.42);}
.callout.warn{border-color:rgba(217,70,239,0.45);background:rgba(217,70,239,0.07);}
.callout.dood{border-color:rgba(217,70,239,0.4);background:linear-gradient(135deg, rgba(59,130,246,0.09), rgba(217,70,239,0.09));}

/* numbered steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:26px 0;}
.steps > li{counter-increment:step;position:relative;padding:0 0 4px 50px;margin:0 0 24px;}
.steps > li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:14.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(139,92,246,0.35);}
.steps > li > strong:first-child{display:block;font-size:16.5px;color:#fff;margin-bottom:6px;}

/* figures */
.prose figure{margin:28px 0;}
.prose figure img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--card-border);box-shadow:0 18px 50px rgba(0,0,0,0.45);}
.prose figcaption{margin-top:10px;font-size:12.5px;color:var(--text-faint);text-align:center;font-style:italic;}

/* key-takeaways */
.takeaways{margin:34px 0 8px;padding:22px 24px;border:1px solid var(--card-border);background:var(--card-bg);border-radius:var(--radius);}
.takeaways h3{font-size:14px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);margin-bottom:12px;}
.takeaways ul{margin:0;padding-left:20px;}
.takeaways li{margin-bottom:8px;font-size:15px;}

/* CTA */
.article-cta{margin:40px 0 0;padding:26px;border-radius:var(--radius);border:1px solid var(--card-border);background:linear-gradient(135deg, rgba(59,130,246,0.13), rgba(139,92,246,0.11) 52%, rgba(217,70,239,0.13));}
.article-cta h3{font-size:19px;margin-bottom:8px;}
.article-cta p{font-size:14.5px;color:var(--text-dim);margin:0 0 16px;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;font-weight:700;font-size:14px;background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(139,92,246,0.35);}
.btn.ghost{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);box-shadow:none;margin-left:8px;}

/* byline / attribution */
.attribution{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.08);font-size:12.5px;color:var(--text-faint);line-height:1.65;}
.attribution strong{color:var(--text-dim);}

/* ---------- sidebar ---------- */
.sidebar{position:sticky;top:86px;display:flex;flex-direction:column;gap:16px;}
.side-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px 20px;backdrop-filter:blur(12px);box-shadow:0 16px 48px rgba(59,130,246,0.10), inset 0 1px 0 rgba(255,255,255,0.10);}
.side-card h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:12px;}
.toc{list-style:none;margin:0;padding:0;font-size:13.5px;}
.toc li{margin-bottom:9px;line-height:1.4;}
.toc a{color:var(--text-dim);border-left:2px solid transparent;padding-left:10px;display:block;}
.toc a:hover{color:#fff;border-left-color:var(--grad-violet);}
.side-links{list-style:none;margin:0;padding:0;font-size:13.5px;}
.side-links li{margin-bottom:10px;}
.side-links a{color:var(--text-dim);display:flex;gap:8px;align-items:baseline;}
.side-links a:hover{color:#fff;}
.side-cta{background:linear-gradient(135deg, rgba(59,130,246,0.16), rgba(217,70,239,0.16));border-color:rgba(217,70,239,0.4);}
.side-cta p{font-size:13px;color:var(--text-dim);margin:0 0 14px;line-height:1.55;}
.side-cta .btn{width:100%;justify-content:center;font-size:13px;padding:10px 16px;}
.ember-card{border-color:rgba(59,130,246,0.45);}
.ember-card .ember-head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:#fff;margin-bottom:8px;}
.ember-card p{font-size:12.8px;color:var(--text-dim);margin:0 0 13px;line-height:1.55;}

/* ---------- related ---------- */
.related{padding:10px 24px 70px;max-width:1180px;margin:0 auto;}
.related h2{font-size:20px;margin-bottom:18px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rel-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;transition:transform .15s,border-color .15s;}
.rel-card:hover{transform:translateY(-3px);border-color:rgba(217,70,239,0.55);}
.rel-card .kicker{font-size:11px;font-weight:700;color:var(--grad-fuchsia);text-transform:uppercase;letter-spacing:.04em;}
.rel-card h3{font-size:15px;font-weight:700;line-height:1.35;}
.rel-card p{font-size:12.8px;color:var(--text-faint);margin:0;line-height:1.5;}

/* ---------- footer ---------- */
footer{border-top:1px solid rgba(255,255,255,0.06);padding:40px 24px;}
.foot-wrap{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--text-dim);}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--text-faint);}
.foot-social{display:flex;gap:14px;}
.foot-note{width:100%;text-align:center;font-size:11.5px;color:var(--text-faint);margin-top:22px;}

@media (max-width:1000px){
  .article-layout{grid-template-columns:1fr;gap:28px;}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap;}
  .sidebar .side-card{flex:1;min-width:250px;}
  .rel-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  nav.primary{display:none;}
  h1.title{font-size:29px;}
  .dek{font-size:15.5px;}
  .prose{font-size:15.5px;}
  .rel-grid{grid-template-columns:1fr;}
  .search-pill{display:none;}
}

/* ============================================================
   Hearth index / hub / interview additions
   (appended — everything above is the article layer)
   ============================================================ */

/* The global XRPL Home appbar is mounted into #labGlobalHeader by lab-shell.js.
   Hearth only styles what lives BELOW it, so the platform header and the
   wallet-connect chrome keep their own look on every Hearth page. */
main.hearth{display:block;}

.hero-section{padding:52px 24px 10px;}
.subnav{display:flex;gap:8px;margin:28px 0 8px;flex-wrap:wrap;}
.subnav a{padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);transition:background .15s,border-color .15s,color .15s;}
.subnav a:hover{color:#fff;}
.subnav a.active{color:#fff;background:rgba(139,92,246,0.18);border-color:var(--card-border);}

.section{padding:30px 24px 56px;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.section-head h2{font-size:22px;font-weight:700;}
.section-head .sub{font-size:13.5px;color:var(--text-faint);margin-top:6px;max-width:520px;}
.pillar-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grad-fuchsia);margin-bottom:8px;}
.view-all{font-size:13px;font-weight:700;color:var(--text-dim);white-space:nowrap;}
.view-all:hover{color:#fff;}

.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);}
.guide-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:9px;backdrop-filter:blur(12px);box-shadow:0 16px 48px rgba(59,130,246,0.10), inset 0 1px 0 rgba(255,255,255,0.10);transition:transform .15s,border-color .15s;}
.guide-card:hover{transform:translateY(-3px);border-color:rgba(217,70,239,0.55);}
.guide-icon{font-size:22px;}
.guide-card h3{font-size:16px;font-weight:700;line-height:1.35;}
.guide-card p{font-size:13px;color:var(--text-dim);margin:0;line-height:1.55;flex:1;}
.guide-meta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-faint);margin-top:6px;gap:10px;}
.badge{background:rgba(139,92,246,0.16);border:1px solid var(--card-border);border-radius:999px;padding:4px 10px;font-weight:700;color:var(--text-dim);white-space:nowrap;}
.count-line{margin-top:18px;font-size:13px;color:var(--text-faint);}

/* interview source links row */
.source-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}

/* lead figure on interviews */
.prose figure.lead-figure{margin:0 0 30px;}
.prose figure.lead-figure img{border-radius:14px;}

/* wallet-aware bits injected by hearth-session.js */
.hearth-wallet-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);
  background:rgba(59,130,246,0.10);border:1px solid rgba(59,130,246,0.32);border-radius:10px;
  padding:9px 12px;margin:0 0 14px;}
.hearth-wallet-note .addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#fff;}
.hearth-wallet-note.disconnected{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--text-faint);}

.hearth-foot{border-top:1px solid rgba(255,255,255,0.06);padding:40px 24px;}

@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid{grid-template-columns:1fr;} .source-row .btn{width:100%;justify-content:center;margin-left:0;} }