/* Blog: a navy banner in the family of the other pages, where specks of light gather into
   the titles of posts to come (heroes/ink.js), then a calm white page for reading. Builds on plate.css. */
body.blog-page { background: #FFFFFF; }
.ink-hero { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(104deg, var(--ece-navy) 0%, var(--ece-deep) 75%); }
.ink-hero .stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Scrim keeps the headline readable while scattered specks drift across it. */
.ink-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(21,29,75,.9) 0%, rgba(21,29,75,.6) 30%, rgba(21,29,75,0) 45%); }
.ink-hero > .wrap { position: relative; z-index: 2; pointer-events: none; }
.ink-hero > .wrap a { pointer-events: auto; }
.ink-head { min-height: min(42rem, 80vh); display: flex; flex-direction: column; justify-content: center; max-width: 30rem; padding-block: 2rem 4rem; }
.ink-head h1 { font: 600 clamp(3.2rem, 7vw, 5.4rem)/1 var(--serif); letter-spacing: -.025em; color: #fff; margin: 0 0 1.5rem; }
.ink-head h1::after { content: ""; display: block; width: 5rem; height: 4px; background: var(--ece-orange); margin-top: 1.5rem; }
.ink-lede { font: 400 1.25rem/1.6 var(--serif); color: var(--on-navy); margin: 0 0 1.5rem; }
.ink-soon { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .95rem; color: #AEB7D6; margin: 0; }
.ink-soon .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ece-orange); box-shadow: 0 0 0 4px rgba(233,113,50,.22); }

.blog { padding-block: 4rem 5rem; }
.blog h2 { font: 600 1.9rem var(--serif); margin: 0 0 1.75rem; }
.expect { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.expect article { border-top: 3px solid var(--ece-orange); padding-top: 1rem; }
.expect article:nth-child(2) { border-top-color: var(--ece-deep); }
.expect article:nth-child(3) { border-top-color: #5B6FC7; }
.expect article:nth-child(4) { border-top-color: var(--ink-2); }
@media (max-width: 1000px) { .expect { grid-template-columns: repeat(2, 1fr); } }
.expect h3 { font: 600 1.3rem/1.25 var(--serif); margin: 0 0 .5rem; }
.expect p:last-child { margin: 0; color: var(--ink-2); font: 400 1.05rem/1.65 var(--serif); }
.follow { margin: 3rem 0 0; color: var(--ink-2); }
@media (max-width: 800px) {
  .expect { grid-template-columns: 1fr; gap: 2rem; }
  .ink-head { min-height: auto; padding-bottom: 46vh; }
  .ink-hero::before { background: linear-gradient(180deg, rgba(21,29,75,.75) 0%, rgba(21,29,75,0) 50%); }
}