/* Energy Academy Project — blog layer.
   Loaded after css/site.css. Same palette, same fonts, same header and footer;
   this file only adds the reading column and the post furniture.
   Draft: noindex. */

/* ---------- blog hero ---------- */
.blog-hero h1{max-width:18ch}
.blog-hero .btn-row{margin-top:22px}

.page-hero--post{padding-bottom:clamp(34px,5vw,58px)}
.page-hero--post h1{
  font-size:clamp(2.05rem,4.3vw,3.25rem);
  max-width:20ch;
  margin-bottom:.34em;
}
.page-hero--post .eyebrow{margin-bottom:12px}
.eyebrow-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.eyebrow-link:hover{color:var(--gold-hot);border-bottom-color:currentColor}

.post-standfirst{
  font-size:clamp(1.08rem,1.9vw,1.28rem);
  line-height:1.55;
  color:var(--ink-dim);
  max-width:56ch;
  margin:0 0 16px;
}
.page-hero--post .tags{margin-top:4px}

/* ---------- shared meta line ---------- */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 12px;
}
.post-meta .dot{color:var(--gold);opacity:.75}

/* ---------- index listing ---------- */
.post-list{list-style:none;margin:0;padding:0;max-width:900px}
.post-item{padding:clamp(26px,4vw,36px) 0;border-top:1px solid var(--line)}
.post-item:first-child{border-top:0;padding-top:0}
.post-item:last-child{border-bottom:1px solid var(--line)}
.post-item h2{
  font-size:clamp(1.45rem,3vw,2.05rem);
  margin:0 0 12px;max-width:26ch;
}
.post-item h2 a{color:var(--ink);text-decoration:none}
.post-item h2 a:hover{color:var(--gold-hot)}
.post-summary{
  color:var(--ink-dim);max-width:62ch;
  font-size:1.05rem;line-height:1.62;margin:0 0 16px;
}
.post-foot{
  display:flex;flex-wrap:wrap;gap:14px 20px;
  align-items:center;justify-content:space-between;
}
.read-on{
  font-family:var(--font-display);font-weight:600;font-size:.88rem;
  text-decoration:none;white-space:nowrap;
}

.feed-link{
  display:inline-block;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);text-decoration:none;
  border:1px solid rgba(212,170,90,.45);border-radius:999px;
  padding:7px 14px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.feed-link:hover{color:var(--gold-hot);border-color:rgba(242,172,42,.8)}

/* ---------- reading column ----------
   ~70 characters at the body size below; the institutional pages run
   narrower type, a blog post has to be readable for ten minutes. */
.section--post{padding-top:clamp(40px,6vw,72px)}

.prose{
  max-width:58ch;
  margin-inline:auto;
  font-size:1.16rem;
  line-height:1.75;
  color:#E4EDF6;
  hyphens:manual;
}
@media (max-width:640px){
  .prose{font-size:1.06rem;line-height:1.7}
}

/* one rhythm rule, and nothing more specific competing with it:
   `.prose p{margin:0}` would out-specify `.prose > * + *` and collapse
   the gap between paragraphs. Reset first, then space. */
.prose > *{margin:0}
.prose > * + *{margin-top:1.25em}
.prose > h2{
  font-family:var(--font-display);
  font-size:clamp(1.42rem,2.7vw,1.9rem);
  line-height:1.16;
  color:var(--ink);
  margin:2.1em 0 0;
  padding-top:1em;
  border-top:1px solid var(--line);
  position:relative;
}
.prose > h2::before{
  content:"";position:absolute;left:0;top:-1px;
  width:54px;height:2px;background:var(--gold);
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose > h2:first-child::before{display:none}
.prose h3{
  font-size:1.2rem;color:var(--ink);
  margin:1.8em 0 0;
}
.prose strong{color:#FFFFFF;font-weight:600}
.prose em{color:var(--ink)}
.prose a{
  color:var(--wave-soft);
  text-decoration:underline;
  text-decoration-color:rgba(90,169,245,.45);
  text-underline-offset:3px;
}
.prose a:hover{color:var(--gold-hot);text-decoration-color:currentColor}

.prose ul,.prose ol{margin:0;padding-left:1.35em}
.prose li{margin-top:.5em}
.prose li:first-child{margin-top:0}
.prose li::marker{color:var(--gold)}

.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;
  border-left:2px solid var(--gold);
  color:var(--ink-dim);
}
.prose blockquote p + p{margin-top:.9em}

.prose code{
  font-family:var(--font-mono);font-size:.86em;
  background:rgba(160,196,230,.1);
  border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;
}
.prose pre{
  overflow-x:auto;
  background:rgba(4,12,22,.7);
  border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;
}
.prose pre code{background:none;border:0;padding:0;font-size:.84rem;line-height:1.6}

.prose img{border-radius:10px;border:1px solid var(--line)}
.prose figure{margin:1.8em 0}
.prose figcaption{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:10px;
}
.prose hr{
  border:0;height:1px;background:var(--line-strong);margin:2.2em 0;
}

/* tables get their own scroller, the page never scrolls sideways */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;
  margin:1.7em 0;
}
.table-scroll table{
  width:100%;min-width:420px;border-collapse:collapse;
  font-size:.95rem;
}
.table-scroll th{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:500;
  text-align:left;padding:13px 15px;white-space:nowrap;
  border-bottom:1px solid var(--line-strong);
  background:rgba(22,50,79,.35);
}
.table-scroll td{
  padding:12px 15px;color:var(--ink-dim);
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll tbody tr:last-child td strong{color:var(--ink)}

/* ---------- sources — always visible, every post has them ---------- */
.sources{
  max-width:58ch;
  margin:clamp(42px,6vw,68px) auto 0;
  padding:clamp(20px,3vw,28px);
  background:linear-gradient(165deg,rgba(22,50,79,.45),rgba(9,20,36,.62));
  border:1px solid var(--line-strong);
  border-radius:14px;
}
.sources h2{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);font-weight:500;
  margin:0 0 16px;
}
.sources ol{margin:0;padding-left:1.4em}
.sources li{margin-top:16px;color:var(--ink-dim);font-size:.95rem;line-height:1.55}
.sources li:first-child{margin-top:0}
.sources li::marker{font-family:var(--font-mono);font-size:.82em;color:var(--gold)}
.src-label{display:block;color:var(--ink)}
.src-url{
  display:block;margin-top:4px;
  font-family:var(--font-mono);font-size:.74rem;line-height:1.45;
  color:var(--ink-faint);text-decoration:none;
  word-break:break-word;overflow-wrap:anywhere;
}
.src-url:hover{color:var(--gold-hot)}

/* ---------- end of post ---------- */
.post-end{
  max-width:58ch;
  margin:clamp(34px,5vw,54px) auto 0;
  padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
}