/* freeeme blog — sits on top of styles.css (same colours, fonts and column) */

.blog-main{padding-top:clamp(120px,14vw,170px)}

/* blog home + topic pages */
.blog-head{padding-bottom:clamp(40px,6vw,72px)}
.blog-h1{font-size:clamp(40px,5.6vw,80px);line-height:.98;letter-spacing:-.045em;font-weight:600;max-width:13em}
.blog-h1 em{font-weight:400;letter-spacing:-.03em}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.topics a{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:inset 0 0 0 1px var(--line-hi);transition:background .2s}
.topics a:hover{background:rgba(26,25,22,.05)}
.blog-list{padding-bottom:clamp(90px,11vw,150px)}

/* post cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.card-post{display:flex;flex-direction:column;gap:10px;padding:26px 26px 22px;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s,background .3s}
.card-post:hover{transform:translateY(-3px);border-color:var(--line-hi);background:var(--card-hi)}
.card-img{width:calc(100% + 52px);max-width:none;margin:-26px -26px 8px;height:auto;aspect-ratio:1200/630;object-fit:cover;object-position:70% center;border-radius:21px 21px 0 0;background:#1a2d50}
.card-cat{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:500}
.card-title{font-size:23px;line-height:1.18;letter-spacing:-.02em;font-weight:600}
.card-desc{color:var(--mute);font-size:16px;line-height:1.5}
.card-date{margin-top:auto;padding-top:8px;font-size:14px;color:var(--faint)}

/* breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--faint);margin-bottom:22px}
.crumbs a{color:var(--mute)}
.crumbs a:hover{color:var(--ink)}

/* post */
.post-head,.post-cover,.prose,.post-more{max-width:760px}
.post-title{font-size:clamp(36px,4.8vw,64px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
.post-dek{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2vw,27px);line-height:1.3;color:var(--mute);margin-top:20px;letter-spacing:-.01em}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:24px;font-size:14px;color:var(--faint)}
.post-cover{margin-top:40px}
.post-cover img{width:100%;height:auto;border-radius:22px;background:var(--card)}

.prose{padding:clamp(36px,5vw,56px) 0 0;font-size:clamp(18px,1.3vw,20px);line-height:1.68;color:#3d3a34}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(26px,2.5vw,34px);line-height:1.15;letter-spacing:-.03em;font-weight:600;color:var(--ink);margin-top:2em}
.prose h3{font-size:22px;line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin-top:1.7em}
.prose h2 + *,.prose h3 + *{margin-top:.6em}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--faint)}
.prose blockquote{border-left:3px solid var(--ink);padding:4px 0 4px 20px;font-family:var(--serif);font-style:italic;font-size:1.12em;color:var(--ink)}
.prose img{width:100%;height:auto;border-radius:16px;margin:.4em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose code{font-size:.9em;background:var(--card);padding:2px 6px;border-radius:6px}
.prose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.prose th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500;border-bottom-color:var(--line-hi)}
.prose td:first-child{white-space:normal;min-width:9em;color:var(--ink)}

/* FAQ */
.post-faq{margin-top:2.4em}
.post-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.post-faq details:first-of-type{border-top:1px solid var(--line);margin-top:.8em}
.post-faq summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";color:var(--faint);font-weight:400}
.post-faq details[open] summary::after{content:"−"}
.post-faq details p{margin-top:10px}

/* call to action + note */
.post-cta{margin-top:3em;padding:32px;border-radius:24px;background:#010e25;color:rgba(255,255,255,.74)}
.post-cta-t{font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.03em;font-weight:600;color:#fff}
.post-cta p + p{margin-top:10px;font-size:17px}
.post-cta .btn{margin-top:22px;background:#fff;color:#1a1916}
.post-note{font-size:14px !important;line-height:1.55;color:var(--faint);margin-top:2em}

.post-more{margin:0 auto;padding:clamp(80px,10vw,130px) 0}
.post-more .eyebrow{margin-bottom:20px}
.post-more .cards{grid-template-columns:1fr}

@media (max-width:640px){
  .post-cta{padding:26px 22px}
  .card-post{padding:22px 20px 18px}
  .card-img{width:calc(100% + 40px);margin:-22px -20px 8px}
}