/* ══ Humanometer — shared articles stylesheet ══
   Reuses the site design tokens (see styles.css / terms.html).
   Linked by public/articles/index.html and every article. */

:root{
  --bg:#07090f; --bg2:#0c0f1a; --bg3:#11151f;
  --gold:#d4a843; --gold-bright:#f0c96a;
  --text:#ece8de; --muted:#8a857c; --faint:#5f5b53;
  --gbdr:rgba(212,168,67,.22);
  --hr:rgba(212,168,67,.14);
  --maxw:720px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── Top bar (mirrors terms.html / privacy.html) ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;border-bottom:1px solid var(--gbdr);background:var(--bg2);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);}
@media(max-width:600px){.topbar{padding:14px 18px;}}
.topbar-logo{display:flex;align-items:center;gap:14px;}
.topbar-logo svg{width:30px;height:30px;flex-shrink:0;}
.wm{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;letter-spacing:.04em;line-height:1;}
.wm b{color:var(--gold);}
.topbar-cta{color:var(--gold);text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--gbdr);border-radius:999px;padding:7px 16px;transition:background .2s,border-color .2s,color .2s;}
.topbar-cta:hover{background:rgba(212,168,67,.1);border-color:var(--gold);color:var(--gold-bright);}
.topbar-cta.strong{color:#0a0a0a;background:var(--gold);border-color:var(--gold);}
.topbar-cta.strong:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#0a0a0a;}
.topbar-nav{display:flex;align-items:center;gap:12px;}
@media(max-width:600px){.topbar-nav{gap:10px;}.topbar-cta{padding:6px 13px;}}
@media(max-width:480px){.topbar .wm{display:none;}}

/* ── Layout ── */
main{max-width:var(--maxw);margin:0 auto;padding:56px 28px 40px;}
@media(max-width:600px){main{padding:36px 22px 30px;}}

a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .18s;}
a:hover{color:var(--gold-bright);}

/* ── Breadcrumb ── */
.crumbs{font-size:12px;letter-spacing:.04em;color:var(--faint);margin-bottom:28px;text-transform:uppercase;}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--gold);}
.crumbs span{margin:0 8px;color:var(--faint);}

/* ── Article header ── */
.eyebrow{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
h1{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,6vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin-bottom:20px;}
.lede{font-size:20px;line-height:1.6;color:var(--text);font-weight:300;margin-bottom:26px;}
@media(max-width:600px){.lede{font-size:18px;}}
.byline{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;color:var(--muted);padding-bottom:28px;margin-bottom:38px;border-bottom:1px solid var(--hr);}
.byline .dot{color:var(--faint);}

/* ── Share bar (prominent, top of article) ── */
.share-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 36px;padding:15px 20px;background:var(--bg2);border:1px solid var(--gbdr);border-radius:12px;}
.share-bar-label{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.share-btns{display:flex;gap:10px;flex-wrap:wrap;}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--gbdr);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;transition:background .18s,border-color .18s,color .18s;}
.share-btn svg{width:18px;height:18px;fill:currentColor;}
.share-btn:hover{background:var(--gold);border-color:var(--gold);color:#0a0a0a;}
.share-native{display:none;}
.share-copied{font-size:13px;color:var(--gold);}
/* Centered variant for the hub hero */
.share-bar.center{justify-content:center;max-width:440px;margin:30px auto 0;}

/* ── Body typography ── */
.article p{font-size:17px;color:var(--text);margin-bottom:22px;}
.article h2{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,4vw,34px);font-weight:700;letter-spacing:-.01em;line-height:1.15;margin:52px 0 16px;}
.article h3{font-family:'Outfit',sans-serif;font-size:19px;font-weight:600;color:var(--text);margin:34px 0 10px;}
.article ul,.article ol{margin:6px 0 24px 24px;}
.article li{font-size:17px;margin-bottom:10px;}
.article li::marker{color:var(--gold);}
.article strong{color:var(--text);font-weight:600;}
.article em{color:var(--gold);font-style:italic;}

/* ── Stat callout (the data spine) ── */
.stat{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline;background:var(--bg2);border:1px solid var(--gbdr);border-left:3px solid var(--gold);border-radius:8px;padding:22px 26px;margin:30px 0;}
.stat-num{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,7vw,54px);font-weight:700;color:var(--gold);line-height:1;grid-row:span 2;}
.stat-lead{font-size:16px;color:var(--text);font-weight:400;align-self:end;}
.stat-src{font-size:13px;color:var(--muted);}
.stat-src a{color:var(--muted);}
.stat-src a:hover{color:var(--gold);}
@media(max-width:520px){.stat{grid-template-columns:1fr;}.stat-num{grid-row:auto;}}

/* ── Short-answer box (profession explainers; snippet-friendly) ── */
.answer{background:linear-gradient(160deg,var(--bg2),var(--bg3));border:1px solid var(--gbdr);border-left:3px solid var(--gold);border-radius:8px;padding:20px 24px;margin:28px 0;}
.answer .q{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.answer p{font-size:17px;color:var(--text);margin:0;}
.answer strong{color:var(--gold);font-weight:600;}

/* ── Pull quote / key idea ── */
.pull{border-left:3px solid var(--gold);padding:4px 0 4px 24px;margin:34px 0;font-family:'Cormorant Garamond',serif;font-size:clamp(23px,3.6vw,29px);line-height:1.35;color:var(--text);font-style:italic;}
.pull b{color:var(--gold);font-weight:700;font-style:normal;}

/* ── Aside / history box ── */
.aside{background:var(--bg3);border:1px solid var(--hr);border-radius:10px;padding:22px 26px;margin:32px 0;}
.aside h4{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.aside p{font-size:15.5px;color:var(--muted);margin-bottom:12px;}
.aside p:last-child{margin-bottom:0;}
.aside strong{color:var(--text);}

hr.sec{border:0;border-top:1px solid var(--hr);margin:48px 0;}

/* ── CTA card (the funnel) ── */
.cta{background:linear-gradient(160deg,var(--bg2),var(--bg3));border:1px solid var(--gbdr);border-radius:14px;padding:38px 34px;margin:52px 0 20px;text-align:center;}
.cta h3{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,4vw,32px);font-weight:700;color:var(--text);margin-bottom:12px;line-height:1.15;}
.cta p{font-size:16px;color:var(--muted);max-width:460px;margin:0 auto 24px;}
.cta-btn{display:inline-block;background:var(--gold);color:#0a0a0a;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;letter-spacing:.01em;text-decoration:none;padding:15px 34px;border-radius:999px;transition:transform .15s,background .2s;}
.cta-btn:hover{background:var(--gold-bright);color:#0a0a0a;transform:translateY(-1px);}
.cta-note{display:block;margin-top:14px;font-size:12.5px;color:var(--faint);}

/* ── Sources ── */
.sources{margin-top:44px;padding-top:26px;border-top:1px solid var(--hr);}
.sources h2{font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.sources ol{margin:0 0 0 20px;}
.sources li{font-size:14px;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.sources li::marker{color:var(--faint);}
.sources a{color:var(--muted);word-break:break-word;}
.sources a:hover{color:var(--gold);}

/* ── Related / read-next ── */
.readnext{margin-top:40px;}
.readnext h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;margin-bottom:18px;}

/* ── Capability nav (cross-links the five capability pages) ── */
.cap-nav{margin-top:44px;padding:24px 26px;background:var(--bg2);border:1px solid var(--hr);border-radius:12px;}
.cap-nav h4{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.cap-nav ul{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:10px 14px;}
.cap-nav li{margin:0;font-size:15px;}
.cap-nav a{color:var(--muted);text-decoration:none;}
.cap-nav a:hover{color:var(--gold);}
.cap-nav .here{color:var(--text);font-weight:500;}

/* ── Hub: the five capabilities strip ── */
.cap-hub{max-width:960px;margin:0 auto;padding:0 24px 50px;}
.cap-hub h2{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;text-align:center;margin-bottom:6px;}
.cap-hub .sub{text-align:center;color:var(--muted);font-size:15px;margin-bottom:26px;}
.cap-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.cap-item{display:block;background:var(--bg2);border:1px solid var(--hr);border-radius:10px;padding:16px 18px;text-decoration:none;color:var(--text);transition:border-color .2s,background .2s,color .2s;}
.cap-item:hover{border-color:var(--gbdr);background:var(--bg3);color:var(--gold);}
.cap-item b{display:block;font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;margin-bottom:3px;}
.cap-item span{display:block;font-size:13px;color:var(--muted);}
.cap-item .cap-more{margin-top:10px;font-size:12.5px;font-weight:500;color:var(--gold);}

/* ══ Hub / index page ══ */
.hub-hero{max-width:var(--maxw);margin:0 auto;padding:60px 28px 20px;text-align:center;}
.hub-hero h1{margin-bottom:16px;}
.hub-hero p{font-size:18px;color:var(--muted);max-width:560px;margin:0 auto;}
.hub-grid{max-width:960px;margin:0 auto;padding:34px 24px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.card{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--hr);border-radius:12px;padding:26px 26px 24px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s;}
.card:hover{border-color:var(--gbdr);background:var(--bg3);}
.card:hover h2{color:var(--gold);}
.card .tag{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.card h2{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;line-height:1.2;margin-bottom:10px;color:var(--text);transition:color .2s;}
.card p{font-size:15px;color:var(--muted);line-height:1.55;margin-bottom:16px;flex:1;}
.card .more{font-size:13px;color:var(--gold);font-weight:500;}
.card.soon{opacity:.55;pointer-events:none;}
.card.soon .tag{color:var(--muted);}

/* ── Footer ── */
.foot{border-top:1px solid var(--hr);margin-top:20px;padding:34px 28px 60px;text-align:center;}
.foot-links{font-size:13px;color:var(--muted);margin-bottom:12px;}
.foot-links a{color:var(--muted);text-decoration:none;margin:0 10px;}
.foot-links a:hover{color:var(--gold);}
.foot-note{font-size:12px;color:var(--faint);max-width:520px;margin:0 auto;line-height:1.6;}