/* ===== THEME (ink #11181d, Instrument Sans throughout) ===== */
:root{
  --ink:#11181d; --slate2:#2a3640; --slate5:#5a656d; --slate6:#6b7780;
  --slate8:#8b959d; --slateA:#a7adb3; --lineE:#e9eef2; --bgF:#f4f6f8; --footer:#0d1216;
  --wf-dim:#c9d1d8; --wf-lit:#11181d;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:#ffffff; color:var(--ink); font-family:'Instrument Sans', sans-serif; -webkit-font-smoothing:antialiased; }
body { overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:none; margin:0; padding:0 4vw; }
.eyebrow { font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--slate6); font-weight:600; }
.rv { opacity:0; transform:translateY(28px); }

/* ===== BLOG HERO ===== */
.blog-hero { position:relative; background:#fff; padding:9.5rem 0 3.4rem; text-align:center; }
.blog-hero .eyebrow { color:var(--slate5); }
.blog-hero h1 { font-family:'Instrument Sans',sans-serif; font-weight:700; color:var(--ink);
  font-size:clamp(2.8rem,9vw,7rem); letter-spacing:-.035em; line-height:.92; margin:.18em 0 .35em; }
.blog-hero .subtitle { font-size:clamp(1rem,1.5vw,1.2rem); color:var(--slate5); margin:0 auto; max-width:48ch; line-height:1.6; }

/* ===== CATEGORY FILTER ===== */
.filterbar { position:sticky; top:0; z-index:15; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lineE); }
.filterbar .inner { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; padding:1.1rem 4vw; }
.filter-pill { background:none; border:1px solid #d5dce1; color:var(--slate5); border-radius:999px; padding:.5rem 1.1rem;
  font-family:'Instrument Sans',sans-serif; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s ease; white-space:nowrap; }
.filter-pill:hover { border-color:var(--ink); color:var(--ink); }
.filter-pill.active { background:var(--ink); border-color:var(--ink); color:#fff; }

/* ===== POSTS ===== */
.posts { padding:4rem 0 6rem; }

/* featured */
.featured { display:grid; grid-template-columns:1.15fr .85fr; gap:0; border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px rgba(17,24,29,.16); margin-bottom:4.5rem; background:#fff; }
.featured-img { position:relative; min-height:clamp(300px,40vw,520px); background:linear-gradient(150deg,#2a3640,#11181d 78%); overflow:hidden; }
.featured-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.featured:hover .featured-img img { transform:scale(1.05); }
.featured-body { padding:clamp(2rem,3.5vw,3.6rem); display:flex; flex-direction:column; justify-content:center; }
.post-cat { display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--slate6);
  border:1px solid #d5dce1; border-radius:999px; padding:.32rem .8rem; align-self:flex-start; }
.post-date { font-size:.84rem; color:var(--slate8); margin:1.3rem 0 .5rem; letter-spacing:.02em; }
.featured-body h2 { font-family:'Instrument Sans',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.1; margin:0 0 .7em; color:var(--ink); }
.featured-body p { color:var(--slate5); line-height:1.7; font-size:1.05rem; margin:0 0 1.8rem; }
.readmore { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--ink); font-size:.95rem; align-self:flex-start;
  transition:gap .2s ease; }
.readmore svg { transition:transform .2s ease; }
.readmore:hover { gap:.8rem; }
@media(max-width:860px){ .featured{ grid-template-columns:1fr; } .featured-img{ min-height:240px; } }

/* grid */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; }
@media(max-width:980px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .post-grid{ grid-template-columns:1fr; } }
.card { display:flex; flex-direction:column; cursor:pointer; }
.card-img { position:relative; aspect-ratio:16/11; border-radius:13px; overflow:hidden;
  background:linear-gradient(160deg,#39454e,#11181d 88%); }
.card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-img img { transform:scale(1.06); }
.card-img:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.28)); }
.card-cat { position:absolute; left:14px; top:14px; z-index:2; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:#fff; background:rgba(17,24,29,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border-radius:999px; padding:.34rem .7rem; }
.card .post-date { margin:1.1rem 0 .35rem; }
.card h3 { font-family:'Instrument Sans',sans-serif; font-weight:700; letter-spacing:-.01em; font-size:1.22rem; line-height:1.22;
  margin:0 0 .55em; color:var(--ink); }
.card p { color:var(--slate5); line-height:1.62; font-size:.96rem; margin:0 0 1rem; flex:1; }
.empty { text-align:center; padding:4rem 0; color:var(--slate6); font-size:1.05rem; }

/* load more */
.loadmore-wrap { text-align:center; margin-top:4rem; }
.loadmore { background:none; border:1px solid var(--ink); color:var(--ink); border-radius:999px; padding:.9rem 2.4rem;
  font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:.98rem; cursor:pointer; transition:all .2s ease; }
.loadmore:hover { background:var(--ink); color:#fff; transform:translateY(-2px); }

/* conversion glue: the filter JS hides cards with the [hidden] attribute,
   which the author display values above would otherwise override */
.featured[hidden], .card[hidden] { display:none; }