/* Blog pages. Loaded after pages.css and reuses its tokens (--ink, --gray, --coral, --line, --r1, --r2). */

.wrap--read{width:min(820px,100% - 32px)}

/* category pills */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-block;padding:.45em 1.05em;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.9rem;font-weight:500;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.pill:hover{border-color:var(--ink);text-decoration:none}
.pill--on,.pill--on:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* listing */
.grid--posts{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.post{display:flex;flex-direction:column;padding:0;overflow:hidden;transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-2px);box-shadow:0 16px 40px -20px rgba(0,0,0,.35)}
.post>*:not(.post__img){margin-inline:clamp(1.1rem,2.4vw,1.6rem)}
.post__img{display:block;aspect-ratio:16/9;background:#e6e6e6;overflow:hidden}
.post__img img{width:100%;height:100%;object-fit:cover;display:block}
.post__cat{margin-top:clamp(1.1rem,2.4vw,1.6rem);margin-bottom:.5rem;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b53a16}
.post>.post__title:first-child,.post>.post__img+.post__title{margin-top:clamp(1.1rem,2.4vw,1.6rem)}
.card.post .post__title{font-size:1.3rem;font-weight:700;line-height:1.25;letter-spacing:-.015em;margin-bottom:.6rem}
.post__title a{text-decoration:none}
.post__title a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.post__excerpt{color:var(--gray);font-size:.96rem;line-height:1.55;flex:1}
.post__meta{display:flex;flex-wrap:wrap;gap:.2em 1em;margin-top:.4rem;margin-bottom:clamp(1.1rem,2.4vw,1.6rem);padding-top:.9rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--gray)}
.post__meta>*+*::before{content:"·";margin-right:1em}
.post__meta--lg{margin:.6rem 0 0;padding:0;border:0;font-size:.95rem}

.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* single post */
.post-hero .tag a{text-decoration:none}
.post-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:400;line-height:1.08;letter-spacing:-.03em;max-width:22ch}
.post__hero{margin:0;border-radius:var(--r2);overflow:hidden;background:#e6e6e6}
.post__hero img{display:block;width:100%;height:auto}

.article{font-size:1.06rem;line-height:1.75;padding:clamp(1.4rem,4vw,3rem)}
.article{min-width:0;overflow-wrap:break-word}
.article :not(pre)>code{white-space:normal;overflow-wrap:anywhere}
.wrap--read.stack>*{min-width:0}
.article>*:first-child{margin-top:0}
.article>*:last-child{margin-bottom:0}
.article h2{font-size:clamp(1.45rem,2.8vw,1.95rem);font-weight:500;line-height:1.18;letter-spacing:-.02em;margin:2.2em 0 .6em}
.article h3{font-size:1.22rem;font-weight:700;margin:1.8em 0 .5em}
.article p{max-width:none;color:#2b2b2b;margin:0 0 1.15em}
.article ul,.article ol{margin:0 0 1.3em;padding-left:1.4em}
.article li{margin-bottom:.45em;padding-left:.2em}
.article li::marker{color:var(--coral)}
.article a{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:.2em}
.article a:hover{background:rgba(255,98,57,.16)}
.article strong{font-weight:700}
.article blockquote{margin:1.6em 0;padding:.9em 1.3em;border-left:4px solid var(--coral);background:var(--bg);border-radius:0 var(--r1) var(--r1) 0}
.article blockquote p:last-child{margin-bottom:0}
.article pre{margin:1.5em 0;padding:1.1em 1.3em;background:var(--dark);color:#eee;border-radius:var(--r1);overflow-x:auto;font:500 .88rem/1.6 var(--mono)}
.article pre code{background:none;padding:0;white-space:pre;color:inherit}
.article img,.article video,.article iframe{max-width:100%;height:auto;border-radius:var(--r1)}
.article figure{margin:1.6em 0}
.article figcaption{font-size:.88rem;color:var(--gray);margin-top:.5em}
.article hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.article .wp-block-table,.article table{display:block;overflow-x:auto;max-width:100%}
.article table{border-collapse:collapse;margin:1.5em 0;font-size:.95rem}
.article th,.article td{padding:.65em .85em;border:1px solid var(--line);text-align:left;vertical-align:top}
.article th{background:var(--bg);font-weight:700}

@media(max-width:640px){
  .grid--posts{grid-template-columns:1fr}
  .article{font-size:1rem}
}
@media print{.pills,.pager,.frame{display:none}}