/* Chief Nest brand styling for blog posts.
   The posts are Gutenberg content, so this is straightforward prose styling: a
   readable measure, brand typography and the bracket motif on lists. Content is
   rendered untouched, so every heading and link keeps its SEO value.
   Brand hues only: navy #01055e, blue #217bff, cyan #2fd4fb, violet #8138ea. */

.post-head{max-width:760px; margin:0 auto 10px}
.post-head .k{font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:#2fd4fb}
.post-head h1{font-size:clamp(32px,4.6vw,52px); font-weight:600; color:#fff;
  letter-spacing:-.035em; line-height:1.06; margin:14px 0 16px; text-wrap:balance}
.post-meta{font-size:13.5px; color:#8b93cd}
.post-meta span+span::before{content:"·"; margin:0 8px; color:#5c6396}

.post-body{max-width:760px; margin:0 auto}
.post-body > *{max-width:100%}
.post-body p{color:#aab4ee; font-size:17px; line-height:1.72; margin:0 0 20px}
.post-body h2{font-size:clamp(24px,3vw,32px); font-weight:600; color:#fff;
  letter-spacing:-.025em; line-height:1.15; margin:52px 0 14px; text-wrap:balance}
.post-body h3{font-size:20px; font-weight:600; color:#fff; margin:34px 0 10px}
.post-body h4{font-size:17px; font-weight:600; color:#c5ccf2; margin:26px 0 8px}
.post-body strong,.post-body b{color:#fff; font-weight:600}
.post-body a{color:#5c9bff; text-decoration:underline; text-underline-offset:3px}
.post-body a:hover{color:#8ab8ff}
.post-body em{color:#c5ccf2}

/* lists use the bracket motif, like every other list on the site */
.post-body ul{list-style:none; margin:0 0 22px; padding:0;
  display:flex; flex-direction:column; gap:10px}
.post-body ul li{position:relative; padding-left:24px; color:#aab4ee;
  font-size:16.5px; line-height:1.6}
.post-body ul li::before{content:""; position:absolute; left:0; top:.6em;
  width:9px; height:8px; background:#217bff;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 85'%3E%3Cpath d='M0 0H100V28H28V85H0Z'/%3E%3C/svg%3E") no-repeat center/contain}
.post-body ol{margin:0 0 22px; padding-left:22px; color:#aab4ee}
.post-body ol li{font-size:16.5px; line-height:1.6; margin-bottom:10px; padding-left:4px}
.post-body ol li::marker{color:#217bff; font-weight:600}

.post-body blockquote{border-left:3px solid #217bff; margin:28px 0; padding:6px 0 6px 22px}
.post-body blockquote p{font-size:19px; color:#fff; font-weight:500; line-height:1.5}

.post-body img,.post-body figure img{border-radius:14px; display:block; height:auto}
.post-body figure{margin:28px 0}
.post-body figcaption{font-size:13px; color:#8b93cd; margin-top:8px; text-align:center}

.post-body table{width:100%; border-collapse:collapse; margin:26px 0; font-size:15px}
.post-body th,.post-body td{border:1px solid #2a3499; padding:11px 14px; text-align:left}
.post-body th{background:#080d5c; color:#fff; font-weight:600}
.post-body td{color:#aab4ee}

.post-body hr{border:0; border-top:1px solid #1b2380; margin:44px 0}
.post-body code{background:#080d5c; border:1px solid #2a3499; border-radius:6px;
  padding:2px 7px; font-size:14.5px; color:#c5ccf2}
.post-body pre{background:#080d5c; border:1px solid #2a3499; border-radius:12px;
  padding:18px 20px; overflow-x:auto; margin:24px 0}
.post-body pre code{background:none; border:0; padding:0}

/* closing prompt under every article */
.post-cta{max-width:760px; margin:60px auto 0; border:1px solid #2a3499;
  border-radius:16px; padding:32px 30px; text-align:center; background:
    radial-gradient(600px 300px at 50% 100%, rgba(16,45,194,.30), transparent 72%), #01055e}
.post-cta h2{font-size:24px; font-weight:600; color:#fff; margin:0 0 10px;
  letter-spacing:-.02em}
.post-cta p{color:#aab4ee; font-size:15.5px; margin:0 0 22px}
.post-cta a{display:inline-block; background:#217bff; color:#fff; font-weight:600;
  text-decoration:none; border-radius:100px; padding:12px 28px;
  transition:transform .15s ease, filter .15s ease}
.post-cta a:hover{transform:translateY(-2px); filter:brightness(1.08)}

@media (max-width:760px){
  .post-body p,.post-body ul li,.post-body ol li{font-size:16px}
  .post-body h2{margin:38px 0 12px}
  .post-cta{padding:26px 22px}
}