*{box-sizing:border-box;}
    html,body{margin:0;padding:0;}
    body{
      font-family:var(--font-text);
      background:var(--surface-page);
      color:var(--text-body);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none;}
    h1,h2,h3,h4,p{margin:0;}
    .wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-6);}
    ::selection{background:var(--brand);color:#fff;}
    :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px;}

    /* ---------- NAV (minimal) ---------- */
    .nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;}
    .navlink{transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
    .navlink:hover{opacity:1;}
    .foot-link{transition:color var(--dur-fast) var(--ease-out);}
    .foot-link:hover{color:#fff;}

    /* ---------- MINIMAL HEADER ---------- */
    .blog-head{position:relative;overflow:hidden;border-bottom:2px solid var(--brand);}
    .blog-head[data-variant="ink"]{background:var(--ink-950);}
    .blog-head[data-variant="paper"]{background:var(--paper);}
    .blog-head-inner{position:relative;z-index:1;padding-top:44px;padding-bottom:32px;}
    .blog-head-title{
      font-family:var(--font-display);font-weight:var(--fw-black);
      text-transform:uppercase;letter-spacing:var(--ls-mega);line-height:0.94;
      font-size:clamp(38px,5.4vw,60px);margin:16px 0 0;color:var(--text-strong);
    }
    .blog-head-sub{margin:16px 0 0;max-width:58ch;font-size:var(--fs-body-lg);line-height:var(--lh-normal);color:var(--text-muted);}
    .blog-head-seal{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:380px;opacity:0.06;pointer-events:none;}

    /* ---------- STICKY CONTROLS ---------- */
    .controls{position:sticky;top:72px;z-index:50;background:var(--paper);border-bottom:1px solid var(--border-subtle);}
    .controls-inner{display:flex;flex-direction:column;gap:11px;padding-top:20px;padding-bottom:16px;}
    .controls-top{display:flex;align-items:center;justify-content:space-between;gap:24px;}
    .filterbar{display:flex;gap:8px;flex-wrap:wrap;min-width:0;}
    .pill{
      font-family:var(--font-display);font-size:12px;font-weight:var(--fw-bold);
      letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;
      padding:9px 15px;border:1px solid var(--border-subtle);background:var(--surface-card);
      color:var(--text-body);border-radius:var(--radius-sm);cursor:pointer;
      transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
    }
    .pill:hover{border-color:var(--ink-950);}
    .pill--active{background:var(--blog-accent);color:#fff;border-color:var(--blog-accent);}
    .pill--active:hover{border-color:var(--blog-accent);}

    .searchbox{position:relative;width:288px;flex-shrink:0;}
    .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
    .search-input{
      width:100%;font-family:var(--font-text);font-size:14px;color:var(--text-strong);
      padding:11px 34px 11px 40px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
      background:var(--surface-card);outline:none;
      transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
    }
    .search-input::placeholder{color:var(--text-faint);}
    .search-input:focus{border-color:var(--ink-950);box-shadow:0 0 0 3px var(--brand-wash);}
    .search-input::-webkit-search-decoration,.search-input::-webkit-search-cancel-button{display:none;}
    .search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;background:var(--surface-sunken);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;}
    .search-clear:hover{color:var(--text-strong);}

    .controls-bottom{display:flex;align-items:center;gap:16px;}
    .result-count{font-size:13px;color:var(--text-muted);white-space:nowrap;}
    .result-count strong{color:var(--text-strong);font-weight:var(--fw-bold);}
    .clear-filters{font-family:var(--font-display);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--blog-accent);background:none;border:none;cursor:pointer;font-weight:var(--fw-bold);padding:0;white-space:nowrap;}
    .clear-filters:hover{text-decoration:underline;text-underline-offset:3px;}
    .demo-note{margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:0.03em;color:var(--text-faint);}

    /* ---------- MAIN / GRID ---------- */
    .blog-main{padding:var(--space-8) 0 var(--space-9);}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
    [data-density="compact"] .grid{gap:20px;}
    [data-density="regular"] .grid{gap:32px;}
    [data-density="comfy"] .grid{gap:46px;}

    /* ---------- POST CARD ---------- */
    .post-card{
      position:relative;display:flex;flex-direction:column;background:var(--surface-card);
      border-radius:var(--radius-md);overflow:hidden;
      transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
    }
    .post-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-100);}
    .post-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s var(--ease-out);}
    .post-card:hover .post-media img{transform:scale(1.045);}
    .post-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
    [data-density="compact"] .post-body{padding:14px 16px 18px;gap:8px;}
    [data-density="comfy"] .post-body{padding:24px 26px 28px;gap:12px;}

    .post-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-display);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;line-height:1;}
    .post-cat,.post-date,.post-read{white-space:nowrap;}
    .post-cat{color:var(--blog-accent);font-weight:var(--fw-bold);}
    .post-date,.post-read{color:var(--text-muted);font-weight:var(--fw-bold);letter-spacing:0.05em;}
    .post-dot{color:var(--text-faint);}

    .post-title{
      font-family:var(--font-display);font-weight:var(--fw-black);text-transform:uppercase;
      letter-spacing:-0.015em;line-height:1.05;font-size:19px;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
      min-height:2.1em;
    }
    .post-title a{color:var(--text-strong);transition:color var(--dur-fast) var(--ease-out);}
    .post-link::after{content:"";position:absolute;inset:0;z-index:2;}
    .post-card:hover .post-title a{color:var(--blog-accent);}
    .post-excerpt{color:var(--text-muted);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .post-more{font-family:var(--font-display);font-size:12px;font-weight:var(--fw-bold);letter-spacing:0.06em;text-transform:uppercase;color:var(--blog-accent);margin-top:2px;}

    /* card-style variants */
    [data-cardstyle="editorial"] .post-card{border:1px solid var(--border-subtle);}
    [data-cardstyle="editorial"] .post-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-md);}
    [data-cardstyle="sleeve"] .post-card{border:2px solid var(--ink-950);box-shadow:var(--shadow-hard);}
    [data-cardstyle="sleeve"] .post-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink-950);}
    [data-cardstyle="minimal"] .post-card{background:transparent;border-radius:var(--radius-sm);}
    [data-cardstyle="minimal"] .post-media{border-radius:var(--radius-sm);}
    [data-cardstyle="minimal"] .post-body{padding-left:0;padding-right:0;padding-bottom:6px;}

    /* fallback media */
    .post-media--fallback{position:relative;background:var(--blog-accent);display:block;}
    .fallback-seal{position:absolute;right:-26px;top:50%;transform:translateY(-50%);width:190px;filter:brightness(0);opacity:0.08;pointer-events:none;}
    .fallback-bars{position:absolute;left:9%;right:9%;top:50%;transform:translateY(-50%);height:44%;}
    .fallback-tag{position:absolute;left:16px;bottom:13px;font-family:var(--font-display);font-size:11px;font-weight:var(--fw-bold);letter-spacing:0.12em;text-transform:uppercase;color:var(--paper);opacity:0.92;}

    /* ---------- FEATURED ---------- */
    .featured{position:relative;display:grid;grid-template-columns:1.12fr 1fr;gap:0;margin-bottom:var(--space-7);background:var(--surface-card);border-radius:var(--radius-md);overflow:hidden;}
    [data-cardstyle="editorial"] .featured{border:1px solid var(--border-subtle);}
    [data-cardstyle="editorial"] .featured:hover{box-shadow:var(--shadow-md);}
    [data-cardstyle="sleeve"] .featured{border:2px solid var(--ink-950);box-shadow:var(--shadow-hard);}
    [data-cardstyle="minimal"] .featured{background:transparent;}
    .featured-media{position:relative;display:block;overflow:hidden;min-height:360px;}
    .featured-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s var(--ease-out);}
    .featured:hover .featured-media img{transform:scale(1.04);}
    .featured-media .post-media--fallback{height:100%;}
    .featured-body{padding:42px 46px;display:flex;flex-direction:column;gap:14px;justify-content:center;}
    [data-cardstyle="minimal"] .featured-body{padding:36px 0 36px 40px;}
    .featured-meta{margin-top:2px;}
    .featured-title{
      font-family:var(--font-display);font-weight:var(--fw-black);text-transform:uppercase;
      letter-spacing:var(--ls-mega);line-height:1.0;font-size:clamp(26px,2.6vw,38px);
    }
    .featured-title a{color:var(--text-strong);transition:color var(--dur-fast) var(--ease-out);}
    .featured:hover .featured-title a{color:var(--blog-accent);}
    .featured-excerpt{color:var(--text-body);font-size:var(--fs-body-lg);line-height:var(--lh-normal);max-width:46ch;}

    /* ---------- PAGINATION ---------- */
    .pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:var(--space-8);}
    .pager-nums{display:flex;gap:6px;}
    .pager-num,.pager-arrow{
      display:inline-flex;align-items:center;justify-content:center;
      font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13px;letter-spacing:0.04em;line-height:1;
      min-width:42px;height:42px;border:1px solid var(--border-subtle);background:var(--surface-card);
      color:var(--text-body);border-radius:var(--radius-sm);cursor:pointer;padding:0 8px;box-sizing:border-box;
      transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
    }
    .pager-num:hover:not(.pager-num--active),.pager-arrow:hover:not(:disabled){border-color:var(--ink-950);}
    .pager-num--active{background:var(--ink-950);color:#fff;border-color:var(--ink-950);}
    .pager-arrow{font-size:16px;}
    .pager-arrow:disabled{opacity:0.35;cursor:not-allowed;}

    /* ---------- EMPTY STATE ---------- */
    .empty{text-align:center;padding:var(--space-9) 20px;display:flex;flex-direction:column;align-items:center;gap:12px;}
    .empty-bars{width:180px;margin-bottom:8px;opacity:0.8;}
    .empty-title{font-family:var(--font-display);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:-0.02em;line-height:1.04;font-size:30px;color:var(--text-strong);}
    .empty-sub{color:var(--text-muted);font-size:var(--fs-body-lg);max-width:42ch;margin-bottom:6px;}

    /* ---------- CTA STRIP ---------- */
    .cta-strip{background:var(--ink-950);}
    .cta-inner{display:flex;align-items:center;gap:30px;padding-top:32px;padding-bottom:32px;}
    .cta-bars{width:96px;flex-shrink:0;opacity:0.85;}
    .cta-copy{flex:1;}
    .cta-eyebrow{display:block;font-family:var(--font-display);font-size:11px;letter-spacing:var(--ls-mega-wide);text-transform:uppercase;color:var(--red-400);font-weight:var(--fw-bold);margin-bottom:7px;}
    .cta-head{font-family:var(--font-display);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(22px,2.4vw,30px);color:#fff;}

    /* ---------- RESPONSIVE ---------- */
    @media (max-width:1000px){
      .grid{grid-template-columns:repeat(2,1fr);}
      .featured{grid-template-columns:1fr;}
      .featured-media{min-height:300px;}
      [data-cardstyle="minimal"] .featured-body{padding:28px 0 8px;}
    }
    @media (max-width:760px){
      .navlinks{display:none!important;}
      .foot-cols{grid-template-columns:1fr 1fr!important;}
    }
    @media (max-width:680px){
      .controls-top{flex-direction:column;align-items:stretch;gap:12px;}
      .searchbox{width:100%;order:-1;}
      .filterbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px;scrollbar-width:none;}
      .filterbar::-webkit-scrollbar{display:none;}
      .grid{grid-template-columns:1fr;}
      .demo-note{display:none;}
      .cta-inner{flex-direction:column;align-items:flex-start;gap:20px;}
      .cta-bars{display:none;}
      .featured-body{padding:28px 24px;}
    }

    /* keep the sticky controls bar below the admin-bar-shifted header (logged-in) */
    body.admin-bar .controls{top:104px;}
    @media screen and (max-width:782px){body.admin-bar .controls{top:118px;}}