/* Blog: list, category and single post. Loaded after site.css. */

/* Header */
.blog-head{position:relative;padding:clamp(48px,8vw,96px) 0 clamp(28px,4vw,40px)}
.blog-head::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:140%;z-index:-1;pointer-events:none;
  background:radial-gradient(35% 55% at 15% 40%,color-mix(in srgb,var(--warm) 45%,transparent),transparent 70%),
             radial-gradient(30% 50% at 80% 25%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);filter:blur(8px)}
.blog-head .kicker{font:500 13px/1 var(--mono);color:var(--ink-3);margin-bottom:16px}
.blog-head h1{font-size:clamp(44px,7vw,84px);letter-spacing:-.05em;line-height:.98}
.blog-head p{font-size:clamp(18px,1.8vw,21px);color:var(--ink-2);max-width:44ch;margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:100px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-2);transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip small{font:400 12px/1 var(--mono);color:inherit;opacity:.6}

/* Meta line */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13.5px;color:var(--ink-3)}
.meta a{color:var(--accent-ink);text-decoration:none;font-weight:500}
.meta a:hover{text-decoration:underline}
.meta .dot::before{content:"·"}

/* Cover image, with a calm placeholder when a post has none */
.cover{position:relative;display:block;overflow:hidden;background:var(--sunken);aspect-ratio:16/10}
.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cover.is-empty{display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--sunken)),color-mix(in srgb,var(--teal) 18%,var(--sunken)))}
.cover.is-empty span{font:600 64px/1 var(--font);letter-spacing:-.05em;color:color-mix(in srgb,var(--ink) 18%,transparent)}

/* Featured (newest) post */
.feature{display:grid;grid-template-columns:1.2fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;margin-bottom:20px;transition:box-shadow .2s ease,border-color .2s ease}
.feature:hover{border-color:var(--line-2);box-shadow:0 22px 50px -30px rgba(20,20,40,.4)}
.feature:hover .cover img{transform:scale(1.03)}
.feature .cover{aspect-ratio:auto;min-height:340px}
.feature .body{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.feature .label{font:500 12.5px/1 var(--mono);color:var(--live);margin-bottom:14px}
.feature h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.04em;margin:12px 0 14px}
.feature p{color:var(--ink-2);font-size:17px}
.feature .more{margin-top:24px;font-weight:500;color:var(--accent-ink)}
@media (max-width:820px){.feature{grid-template-columns:1fr}.feature .cover{min-height:0;aspect-ratio:16/10}}

/* Grid of posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1000px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.posts{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.post-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 18px 40px -26px rgba(20,20,40,.4)}
.post-card:hover .cover img{transform:scale(1.04)}
.post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card h3{font-size:20px;letter-spacing:-.025em}
.post-card p{color:var(--ink-2);font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.empty{padding:48px;text-align:center;color:var(--ink-2);background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r)}

/* Pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:40px;flex-wrap:wrap}
.pager-nums{display:flex;gap:4px;margin:0 auto}
.pager a,.pager span[aria-current],.pager .gap{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border-radius:10px;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2)}
.pager a:hover{background:var(--sunken);color:var(--ink)}
.pager span[aria-current]{background:var(--ink);color:var(--bg)}
.pager .gap{min-width:24px;padding:0}
.pager-step{border:1px solid var(--line)}
@media (max-width:560px){.pager-nums{order:3;width:100%;justify-content:center}}

/* Single post */
.article{max-width:760px;margin:0 auto}
.back{display:inline-flex;align-items:center;gap:6px;margin:clamp(28px,5vw,48px) 0 28px;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none}
.back:hover{color:var(--ink)}
.article h1{font-size:clamp(34px,5.4vw,58px);letter-spacing:-.045em;line-height:1.04;margin:14px 0 0}
.article .lead-cover{margin:36px calc(50% - min(50vw - 20px, 520px)) 0;border-radius:20px;overflow:hidden;background:var(--sunken)}
.article .lead-cover img{display:block;width:100%;max-height:620px;object-fit:cover}

.prose{font-family:var(--serif);font-size:clamp(18px,1.6vw,20px);line-height:1.75;color:var(--ink);margin-top:40px}
.prose>*+*{margin-top:1.1em}
.prose p,.prose li{text-wrap:pretty}
.prose a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.35em}
.prose li::marker{color:var(--ink-3)}
.prose h2,.prose h3,.prose h4{font-family:var(--font);margin-top:1.8em;letter-spacing:-.03em}
.prose h2{font-size:1.5em}.prose h3{font-size:1.25em}
.prose strong{font-weight:600}
.prose blockquote{border-left:3px solid var(--accent);padding:.2em 0 .2em 1em;color:var(--ink-2);font-style:italic}
.prose code{font:0.85em/1.4 var(--mono);background:var(--sunken);padding:.15em .35em;border-radius:5px}
.prose pre{font:14px/1.6 var(--mono);background:var(--sunken);border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;font-family:var(--font);font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.prose img{border-radius:12px}
.prose figure{margin:2em calc(50% - min(50vw - 20px, 480px));}
.prose figure a{display:block;border-radius:16px;overflow:hidden;background:var(--sunken)}
.prose figure img{display:block;width:100%;border-radius:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.prose figure a:hover img{transform:scale(1.015)}
@media (max-width:820px){.prose figure,.article .lead-cover{margin-left:0;margin-right:0}}

/* Share + next/prev */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.share span{font-size:14px;color:var(--ink-3);margin-right:6px}
.share a,.share button{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:500 13.5px/1 var(--font);text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--line-2);color:var(--ink)}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.nextprev a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;transition:border-color .15s}
.nextprev a:hover{border-color:var(--line-2)}
.nextprev small{font-size:13px;color:var(--ink-3)}
.nextprev b{font-weight:600;letter-spacing:-.015em;line-height:1.3}
.nextprev .next{text-align:right;grid-column:2}
@media (max-width:560px){.nextprev{grid-template-columns:1fr}.nextprev .next{grid-column:auto}}

/* Comments */
.comments{margin-top:56px}
.comments h2{font-size:24px;letter-spacing:-.03em;margin-bottom:18px}
.comment{padding:18px 0;border-top:1px solid var(--line)}
.comment-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.comment-head b{font-weight:600}
.comment-head time{font-size:13px;color:var(--ink-3)}
.comment-body{color:var(--ink-2)}
.comment .waiting{font-size:13px;color:var(--accent-ink)}
.comment-form{margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:grid;gap:14px}
.comment-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.comment-form .row{grid-template-columns:1fr}}
.comment-form label{display:grid;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.comment-form input,.comment-form textarea{width:100%;font:400 16px/1.5 var(--font);color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}
.comment-form textarea{min-height:140px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.comment-form .hint{font-size:13px;color:var(--ink-3)}
.comment-form .btn{justify-self:start}