/* The Way Out hub (Oct 19 2026 preview): categories as the menu at the top, live search, posts in a grid.
   Same container and left edge as the homepage. */
.blog-index .wrap{max-width:1200px;padding:0 24px}
@media(min-width:960px){.blog-index .wrap{padding:0 40px}}
.blog-index .blog-wrap{max-width:1200px}
.blog-index .blog-hero{padding:48px 0 24px}
.blog-index .blog-title,.blog-index .blog-sub{max-width:46rem}
@media(min-width:960px){.blog-index .blog-hero{padding:72px 0 32px}}

/* menu bar: search + category pills, sticks under the header */
.blog-tools{position:sticky;top:var(--hh,60px);z-index:20;background:rgba(250,250,250,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
html:not(.js) .blog-tools{display:none}
.blog-index .tools-in{display:flex;flex-direction:column;gap:10px;padding-top:12px;padding-bottom:12px}
.b-search{position:relative}
.b-search-ic{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.b-q{font:inherit;font-size:16px;width:100%;min-height:46px;padding:10px 14px 10px 42px;border:1px solid #D6D0C8;border-radius:999px;background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none}
.b-q::placeholder{color:#6F6A63}
.b-q:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.b-cats{margin:0 -24px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.b-cats::-webkit-scrollbar{display:none}
.b-cats ul{list-style:none;margin:0;padding:2px 24px;display:flex;gap:8px;width:max-content}
.b-cat{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line);background:var(--card);border-radius:999px;color:var(--green);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.b-cat:hover{border-color:var(--green)}
.b-cat:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.b-cat.is-on{background:var(--green);border-color:var(--green);color:#fff}
.b-n{font-size:12px;font-weight:600;color:var(--ink-2);background:#fff;border-radius:999px;padding:1px 7px;line-height:1.5}
.b-cat.is-on .b-n{background:rgba(255,255,255,.18);color:#fff}
@media(min-width:860px){
  .blog-index .tools-in{flex-direction:row;align-items:center;gap:16px}
  .b-search{flex:0 1 230px;min-width:170px}
  .b-cat{padding:0 12px;font-size:14.5px;gap:6px}
  .b-cats ul{gap:6px}
  .b-cats{margin:0;flex:1;min-width:0;overflow:visible}
  .b-cats ul{padding:2px;flex-wrap:wrap;width:auto}
}

/* posts */
.blog-index .blog-list-sec{padding:32px 0 72px}
.b-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:720px){.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.b-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.b-grid .post-card{display:flex;flex-direction:column;padding:24px;margin:0}
.b-grid .post-card[hidden]{display:none}
.b-grid .post-card-more{margin-top:auto;padding-top:14px}
.b-grid .post-card-desc{margin-bottom:0}
.post-cat{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--terra-text);background:var(--terra-l);border-radius:999px;padding:3px 10px;margin:0 0 10px}
.b-grid .post-meta{margin:0}
.b-empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;color:var(--ink-2)}
.b-empty[hidden]{display:none}
.b-empty-t{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:0 0 6px}
.b-clear{font:inherit;font-weight:600;color:var(--green);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.blog-index .nl{margin-top:48px}
@media(min-width:960px){
  .blog-index .nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);column-gap:48px;align-items:center;padding:40px}
  .blog-index .nl>.kicker,.blog-index .nl-title,.blog-index .nl-sub{grid-column:1}
  .blog-index .nl-form{grid-column:2;grid-row:1/4}
  .blog-index .nl-msg{grid-column:2}
  .blog-index .nl-sub{margin-bottom:0}
}