:root{ --blog-read: 760px; }
.blog-post, .blog-index{ padding: 2rem 1rem 3rem; }
.blog-wrap{ max-width: var(--blog-read); margin: 0 auto; }
.blog-crumb{ font-size:.85rem; color:var(--color-text-muted); margin-bottom:.75rem; }
.blog-crumb a{ color:var(--color-accent); text-decoration:none; }
.blog-title{ font-family:var(--font-heading); font-size:2.1rem; line-height:1.18; color:var(--color-heading); margin:.2rem 0 .6rem; }
.blog-byline{ font-size:.9rem; color:var(--color-text-muted); margin-bottom:1.4rem; }
.blog-byline a{ color:var(--color-accent); text-decoration:none; white-space:nowrap; }
.blog-video{ position:relative; width:100%; aspect-ratio:16/9; margin:0 0 2rem; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#000; }
.blog-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.blog-body{ font-size:1.12rem; line-height:1.75; color:var(--color-text); }
.blog-body h2{ font-family:var(--font-heading); font-size:1.5rem; color:var(--color-heading); margin:2.2rem 0 .8rem; line-height:1.25; }
.blog-body h3{ font-family:var(--font-heading); font-size:1.2rem; color:var(--color-heading); margin:1.6rem 0 .6rem; }
.blog-body p{ margin:0 0 1.15rem; }
.blog-body a{ color:var(--color-accent); }
.blog-body ul, .blog-body ol{ margin:0 0 1.15rem 1.4rem; }
.blog-body li{ margin:.3rem 0; }
.blog-body blockquote{ margin:1.5rem 0; padding:.9rem 1.3rem; border-left:4px solid var(--color-accent); background:var(--color-surface-raised); border-radius:0 var(--radius) var(--radius) 0; }
.blog-body blockquote p{ margin:0; font-style:italic; color:var(--color-heading); }
.blog-foot{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--color-border); font-size:.98rem; color:var(--color-text-muted); }
.blog-foot a{ color:var(--color-accent); }
.blog-back{ display:inline-block; margin-top:1rem; font-weight:600; text-decoration:none; }
/* index */
.blog-index-head{ text-align:center; max-width:680px; margin:0 auto 2.2rem; }
.blog-index-head h1{ font-family:var(--font-heading); font-size:2.4rem; color:var(--color-heading); margin-bottom:.6rem; }
.blog-index-head p{ color:var(--color-text-muted); font-size:1.08rem; line-height:1.6; }
.blog-index .blog-wrap{ max-width:1080px; }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.blog-card{ display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:var(--transition); box-shadow:var(--shadow-sm); }
.blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--color-accent); }
.blog-card-thumb{ position:relative; aspect-ratio:16/9; background:#000; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#fff; opacity:.85; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.blog-card-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.blog-card-body h2{ font-family:var(--font-heading); font-size:1.12rem; line-height:1.3; color:var(--color-heading); margin:0; }
.blog-card-ex{ font-size:.9rem; color:var(--color-text-muted); line-height:1.5; margin:0; flex:1; }
.blog-card-date{ font-size:.8rem; color:var(--color-text-muted); }
/* search */
.blog-search{ position:relative; max-width:560px; margin:1.5rem auto 0; }
.blog-search input{ width:100%; padding:.78rem 1rem .78rem 2.7rem; font-size:1rem; font-family:inherit; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); transition:var(--transition); -webkit-appearance:none; }
.blog-search input::placeholder{ color:var(--color-text-muted); }
.blog-search input:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(0,0,0,.07); }
.blog-search-icon{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); font-size:1rem; opacity:.55; pointer-events:none; }
.blog-search-count{ text-align:center; font-size:.9rem; color:var(--color-text-muted); margin:1rem 0 0; min-height:1.1em; }
.blog-card mark, .blog-body mark{ background:#ffe08a; color:#1a1a1a; padding:0 .12em; border-radius:2px; }
.blog-noresult{ grid-column:1/-1; text-align:center; color:var(--color-text-muted); padding:2.5rem 0; font-size:1.05rem; }
@media (max-width:600px){ .blog-title{ font-size:1.6rem; } .blog-body{ font-size:1.05rem; } }