/* Blog (resources/views/blog) — served at /blog.css, on top of home.css. */

.nav-links a[aria-current="page"]{color:var(--chalk)}

/* index header */
.bl-head{padding-block:clamp(56px,9vw,104px) 36px}
.bl-head .h2{margin-top:20px;max-width:16ch}
.bl-head .lede{margin-top:18px}
.bl-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.bl-filter a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--soft);font-size:.875rem;font-weight:600;text-decoration:none;transition:color .2s,border-color .2s,background-color .2s}
.bl-filter a:hover{color:var(--chalk);border-color:var(--chalk)}
.bl-filter a[aria-current]{background:var(--lime);border-color:var(--lime);color:var(--ink)}

/* post cards */
.bl-list{display:grid;gap:16px;padding-bottom:24px}
@media (min-width:760px){.bl-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.bl-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bl-card{position:relative;display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:24px;background:var(--ink-2);transition:border-color .25s,transform .45s var(--ease),background-color .25s}
.bl-card:hover{border-color:rgba(199,244,100,.4);background:var(--ink-3);transform:translateY(-3px)}
.bl-card-link{display:flex;flex:1;flex-direction:column;text-decoration:none}
.bl-card-link:focus-visible{outline:none}
.bl-card:has(.bl-card-link:focus-visible){outline:2px solid var(--lime);outline-offset:3px}
.bl-card-title{margin-top:14px;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em;font-stretch:92%}
.bl-card-desc{margin-top:12px;color:var(--soft);font-size:1rem}
.bl-read{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;color:var(--lime);font-size:.9375rem;font-weight:600}
.bl-read svg{transition:transform .35s var(--spring)}
.bl-card:hover .bl-read svg{transform:translateX(4px)}
.bl-read svg:dir(rtl),.bl-back svg:dir(rtl){scale:-1 1}

/* the newest post leads, across the full row */
.bl-card.is-featured{grid-column:1/-1;padding:clamp(28px,5vw,56px);background:radial-gradient(120% 140% at 100% 0,rgba(199,244,100,.12),transparent 55%),var(--ink-2)}
.bl-card.is-featured .bl-card-title{max-width:20ch;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.03em;font-stretch:88%}
.bl-card.is-featured .bl-card-desc{max-width:60ch;font-size:clamp(1.0625rem,1.4vw,1.2rem)}

.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--mute);font-size:.875rem}
.bl-draft{padding:2px 8px;border-radius:999px;background:rgba(242,180,65,.14);color:var(--amber);font-size:.75rem;font-weight:700}
.bl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;padding:0;list-style:none}
.bl-tags a{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(199,244,100,.1);color:var(--lime);font-size:.8125rem;font-weight:600;text-decoration:none}
.bl-tags a:hover{background:rgba(199,244,100,.2)}
.bl-empty{padding:48px 0;color:var(--soft)}

/* a post */
.bl-post{max-width:calc(760px + var(--gut) * 2);padding-block:40px 24px}
.bl-back{display:inline-flex;align-items:center;gap:6px;color:var(--soft);font-size:.9375rem;font-weight:600;text-decoration:none}
.bl-back:hover{color:var(--chalk)}
.bl-post-head{padding-block:36px 40px;border-bottom:1px solid var(--line)}
.bl-post-head .bl-tags{margin:0 0 18px}
.bl-post-head h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:.98;letter-spacing:-.035em;font-stretch:88%}
.bl-post-head .lede{margin-top:20px}
.bl-post-head .bl-meta{margin-top:24px}
.bl-note{margin-top:20px;padding:12px 16px;border:1px solid var(--line-2);border-radius:14px;color:var(--soft);font-size:.9375rem}

.bl-prose{padding-top:36px;font-size:1.125rem;line-height:1.72;color:#d9ddd3}
.bl-prose>*+*{margin-top:1.15em}
.bl-prose p{max-width:none}
.bl-prose h2,.bl-prose h3{position:relative;color:var(--chalk);scroll-margin-top:96px}
.bl-prose h2{margin-top:2.2em;font-size:clamp(1.6rem,3vw,2rem);line-height:1.1}
.bl-prose h3{margin-top:1.8em;font-size:1.3rem}
.bl-prose h2+*,.bl-prose h3+*{margin-top:.7em}
.post-anchor{margin-inline-start:.35em;color:var(--mute);text-decoration:none;opacity:0;transition:opacity .2s}
.bl-prose h2:hover .post-anchor,.bl-prose h3:hover .post-anchor,.post-anchor:focus-visible{opacity:1}
.bl-prose a{color:var(--lime);text-decoration-thickness:1px;text-underline-offset:3px}
.bl-prose strong{color:var(--chalk)}
.bl-prose ul,.bl-prose ol{padding-inline-start:1.3em}
.bl-prose li+li{margin-top:.45em}
.bl-prose li::marker{color:var(--lime)}
.bl-prose blockquote{padding:4px 0 4px 20px;border-inline-start:3px solid var(--lime);color:var(--chalk);font-size:1.2rem}
.bl-prose hr{height:1px;border:0;background:var(--line);margin-block:2.4em}
.bl-prose img{max-width:100%;height:auto;border-radius:18px}
.bl-prose code{padding:2px 6px;border-radius:6px;background:rgba(236,238,230,.08);font-size:.9em}
.bl-prose pre{overflow-x:auto;padding:16px 18px;border-radius:14px;background:var(--ink-3)}
.bl-prose pre code{padding:0;background:none}
.bl-prose table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;font-size:1rem}
.bl-prose th,.bl-prose td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}
.bl-prose th{color:var(--chalk);font-weight:600}
.bl-disclaimer{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute);font-size:.875rem}

.bl-more{padding-block:56px 24px}
.bl-more>h2{margin-bottom:24px;font-size:clamp(1.8rem,3.4vw,2.4rem)}
@media (min-width:1100px){.bl-more .bl-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the closing call to action */
.bl-cta{margin-top:72px;padding-block:56px;border-top:1px solid var(--line);background:radial-gradient(80% 140% at 0 100%,rgba(199,244,100,.1),transparent 60%)}
.bl-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.bl-cta h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-stretch:88%}
.bl-cta p{margin-top:10px;color:var(--soft)}

@media (prefers-reduced-motion:reduce){.bl-card,.bl-read svg{transition:none}.bl-card:hover{transform:none}}