/* ===========================================================================
   Big Picture Bio — Journal / article styles
   Layers on top of site.css tokens + components. Long-form editorial reading
   plus the interactive article exhibits (bars, gauge, muller, pareto).
   =========================================================================== */

/* ---------- Article hero meta ---------- */
.article-page .hero-inner{ width:min(820px,64vw); }
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin-top:clamp(22px,3vw,32px); padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted);
}
.article-meta .sep{ color:var(--line-2); }
.article-page .hero .sub{ font-family:var(--serif); font-style:italic; color:var(--ink-2); }

/* ---------- Reading column ---------- */
.measure{ max-width:66ch; }
.article-body p{
  font-family:var(--sans); font-size:clamp(16px,1.15vw,18px); line-height:1.72;
  color:var(--ink-2); margin:0 0 22px; max-width:66ch; text-wrap:pretty;
}
.article-body p a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); }
.article-body p a:hover{ border-bottom-color:var(--accent); color:#fff; }
.article-body strong{ color:var(--ink); font-weight:600; }
.article-body em{ font-style:italic; }
.article-body .lead-para{ font-size:clamp(18px,1.35vw,21px); line-height:1.62; color:var(--ink); }
.article-body h3{
  font-family:var(--sans); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(18px,1.5vw,22px); color:var(--ink); margin:clamp(30px,4vw,44px) 0 10px;
}
.dropcap::first-letter{
  float:left; font-family:var(--serif); font-weight:300; color:var(--accent);
  font-size:4.4em; line-height:.7; padding:6px 12px 0 0;
}

/* superscript citation links */
a.ref{
  font-family:var(--mono); font-size:.66em; font-weight:500; vertical-align:super; line-height:0;
  color:var(--accent); text-decoration:none; margin-left:2px; padding:0 1px;
  border-bottom:1px solid rgba(240,138,184,.4);
}
a.ref:hover{ color:#fff; border-bottom-color:var(--accent); }

/* pull quote */
.pull{
  max-width:38ch; margin:clamp(34px,5vw,52px) 0; padding-left:clamp(18px,2vw,26px);
  border-left:2px solid var(--accent);
  font-family:var(--serif); font-weight:300; font-size:clamp(22px,2.6vw,30px);
  line-height:1.24; letter-spacing:-.015em; color:var(--ink); text-wrap:balance;
}
.pull em{ font-style:italic; color:var(--accent); }

/* ---------- Figures ---------- */
.fig{ margin:clamp(34px,5vw,60px) 0; }
.fig .panel-intro{
  font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--muted);
  margin:6px 0 20px; max-width:66ch;
}
.fig .panel-title-lg{
  font-family:var(--sans); font-weight:400; letter-spacing:-.03em; color:var(--ink);
  font-size:clamp(20px,2vw,27px); line-height:1.14; margin:2px 0 2px;
}
.fig figcaption{
  font-family:var(--sans); font-size:13px; line-height:1.6; color:var(--faint);
  margin-top:16px; max-width:72ch;
}
.fig figcaption b{ color:var(--muted); font-weight:600; }
.fig figcaption a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2); }
.fig figcaption a:hover{ color:var(--ink); border-bottom-color:var(--accent); }

/* toggle control */
.toggle{ display:inline-flex; gap:3px; padding:3px; border:1px solid var(--line-2); border-radius:999px; background:rgba(255,255,255,.03); }
.toggle button{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:transparent; border:0; cursor:pointer;
  padding:8px 15px; border-radius:999px; transition:all .2s ease; white-space:nowrap;
}
.toggle button[aria-pressed="true"]{ color:#2A1020; background:var(--accent); font-weight:500; }

/* tooltip */
.tt{
  position:absolute; pointer-events:none; z-index:20; opacity:0; transform:translate(-50%,-114%);
  transition:opacity .12s ease; background:#16131a; border:1px solid var(--line-2);
  border-radius:10px; padding:10px 13px; min-width:150px; max-width:250px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.tt .tt-h{ font-family:var(--sans); font-weight:600; color:var(--ink); font-size:13.5px; margin-bottom:3px; }
.tt .tt-d{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--accent); margin-bottom:5px; }
.tt .tt-b{ font-family:var(--sans); font-size:12.5px; color:var(--muted); line-height:1.45; }

/* bar chart */
.bars{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(26px,6vw,72px); height:290px; padding:14px 0 0; }
.bar-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-stack{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; width:clamp(54px,9vw,92px); }
.bar{ width:100%; border-radius:4px 4px 0 0; position:relative; height:0; transition:height 1.05s cubic-bezier(.2,.7,.2,1); }
.bar .cap{ position:absolute; left:0; right:0; top:-28px; text-align:center; font-family:var(--serif); color:var(--ink); font-size:17px; opacity:0; transition:opacity .5s ease .7s; }
.bar-x{ margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase; text-align:center; }
.bar-note{ font-family:var(--sans); font-size:12px; color:var(--faint); margin-top:4px; max-width:15ch; text-align:center; }

/* gauge + market layout */
.gauge-wrap{ display:flex; flex-direction:column; align-items:center; }
.gauge-cap{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:10px; text-align:center; max-width:32ch; line-height:1.5; }

/* references */
.refs{ max-width:66ch; margin-top:clamp(48px,7vw,80px); padding-top:26px; border-top:1px solid var(--line); }
.refs h2{ font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 18px; }
ol.reflist{ margin:0; padding:0 0 0 1.5em; }
ol.reflist li{ font-family:var(--sans); font-size:13.5px; line-height:1.62; color:var(--muted); margin:0 0 12px; }
ol.reflist li a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(240,138,184,.3); word-break:break-word; }
ol.reflist li a:hover{ border-bottom-color:var(--accent); }
ol.reflist li em{ font-style:italic; color:var(--ink-2); }

/* ---------- Journal index ---------- */
.post-list{ display:grid; gap:clamp(18px,2vw,24px); margin-top:clamp(30px,4vw,48px); }
.post-card{
  display:grid; grid-template-columns:1fr; gap:14px; text-decoration:none;
  border:1px solid var(--line-2); border-radius:18px; padding:clamp(24px,2.6vw,36px);
  background:radial-gradient(120% 90% at 100% 0%, rgba(240,138,184,.08), transparent 56%), #101014;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.post-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.post-card .pc-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:flex; gap:12px; flex-wrap:wrap; }
.post-card .pc-meta .d{ color:var(--faint); }
.post-card h3{ font-family:var(--sans); font-weight:400; letter-spacing:-.035em; font-size:clamp(24px,2.6vw,36px); line-height:1.06; color:var(--ink); margin:0; max-width:24ch; }
.post-card h3 .italic{ font-family:var(--serif); font-weight:300; font-style:italic; color:var(--accent); }
.post-card p{ font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--muted); margin:0; max-width:64ch; }
.post-card .go{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.post-card:hover .go{ color:var(--accent); }
.post-card .go::after{ content:" →"; }

@media (max-width:620px){
  .bars{ height:220px; gap:16px; }
  .pull{ font-size:clamp(20px,6vw,26px); }
}