/* ---------- blog ---------- */
  .nav-cta{
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    background:var(--navy); color:#fff; border-radius:999px; padding:11px 20px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.92rem;
    box-shadow:0 4px 0 var(--navy-deep); border:0; cursor:pointer;
  }
  .nav-cta:hover{transform:translateY(2px); box-shadow:0 2px 0 var(--navy-deep);}
  @media (max-width:860px){ .nav-cta span{display:none;} .nav-cta{padding:11px 14px;} }

  /* wordmark lockup */
  .nav-row{padding-block:22px;}
  .nav-row .logo{margin-left:30px;}
  @media (max-width:640px){ .nav-row{padding-block:16px;} .nav-row .logo{margin-left:8px;} }
  .logo-img{height:32px;}
  .footer-logo{height:40px;}
  @media (max-width:640px){ .logo-img{height:27px;} .footer-logo{height:34px;} }

  /* ---------- hero ---------- */
  .hero{grid-template-columns:1.15fr 0.85fr; gap:28px;}
  @media (max-width:900px){ .hero{grid-template-columns:1fr; gap:20px;} }
  .hero .eyebrow{display:block; margin-bottom:10px;}
  .hero h1{font-size:clamp(2.1rem, 4vw, 3rem); line-height:1.08;}
  .hero h1 .pink{color:var(--pink);}
  .hero h1 .peri{color:#7B4BE0;}
  .hero-art{position:relative; align-self:stretch; min-height:330px; margin:-42px -44px -42px 0; overflow:hidden;}
  .hero-art::after{
    content:""; position:absolute; inset:-1px; z-index:2; pointer-events:none;
    background:linear-gradient(to bottom, var(--surface) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 84%, var(--surface) 100%);
  }
  .hero-img{
    display:block; width:100%; height:100%; object-fit:cover; object-position:52% 50%;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
  }
  @media (max-width:900px){
    .hero-art{min-height:0; margin:6px -24px -30px;}
    .hero-img{
      height:auto;
      -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
      mask-image:linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
    }
    .hero-art::after{background:linear-gradient(to bottom, var(--surface) 0%, rgba(255,255,255,0) 12%);}
  }

  /* ---------- toolbar ---------- */
  .toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin:30px 0 8px;}
  .search-field{flex:0 1 300px;}
  .cats{display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto;}
  .catbtn{
    border:2px solid var(--border-strong); background:var(--surface); color:var(--ink-muted);
    border-radius:999px; padding:9px 16px; cursor:pointer;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.83rem; white-space:nowrap;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .catbtn:hover{border-color:var(--peri); color:var(--navy);}
  .catbtn[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff;}
  @media (max-width:760px){
    .search-field{flex:1 1 100%;}
    .cats{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);}
    .cats::-webkit-scrollbar{display:none;}
  }

  .count-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:18px 2px 20px;}
  .count-row .count{font-family:'Poppins',sans-serif; font-weight:600; color:var(--ink-muted); font-size:0.95rem;}
  .count-row .count strong{color:var(--navy); font-weight:700;}
  .count-row .hand{color:var(--pink); font-size:1.25rem;}

  /* ---------- post grid ---------- */
  .posts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;}
  .post{
    display:flex; flex-direction:column; text-decoration:none; background:var(--surface);
    border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:var(--shadow);
    transition:transform .2s ease, border-color .2s ease;
  }
  .post:hover{transform:translateY(-5px); border-color:var(--tone);}
  .post[hidden]{display:none;}
  .pv{position:relative; display:block;}
  .pv .scene{display:block; width:100%; height:188px; object-fit:cover;}
  .post .pcat{
    text-transform:none; letter-spacing:0;
    position:absolute; left:14px; bottom:-14px; background:var(--tone); color:#fff;
    border-radius:999px; padding:7px 14px; font-family:'Poppins',sans-serif; font-weight:600;
    font-size:0.74rem; box-shadow:0 10px 18px -10px rgba(22,37,107,.8); white-space:nowrap;
    max-width:calc(100% - 28px); overflow:hidden; text-overflow:ellipsis;
  }
  .post .pcat{position:absolute; left:14px; bottom:-14px;}
  .pb{padding:28px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .post h3{font-size:1.08rem; font-weight:700; line-height:1.3;}
  .post p{margin:0; font-size:0.9rem; line-height:1.55; color:var(--ink-muted); font-weight:600;}
  .pmeta{
    margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; gap:8px 18px;
    border-top:1px solid var(--border); font-size:0.8rem; font-weight:700; color:var(--ink-faint);
  }
  .pmeta span{display:inline-flex; align-items:center; gap:7px;}
  .pmeta svg{color:var(--tone);}
  @media (max-width:1000px){ .posts{grid-template-columns:repeat(2, minmax(0,1fr));} }
  @media (max-width:640px){ .posts{grid-template-columns:1fr;} }

  .more-row{display:flex; justify-content:center; padding:38px 0 8px;}
  .more-row .btn{min-width:230px; justify-content:center;}
  .empty{display:none; text-align:center; padding:54px 20px 60px; color:var(--ink-muted); font-weight:700; font-size:1.04rem;}
  .empty.show{display:block;}
  .empty .hand{display:block; font-size:1.6rem; color:var(--peri); margin-bottom:8px;}

  /* ---------- newsletter ---------- */
  .signup{
    position:relative; overflow:hidden; border-radius:32px; padding:40px 38px 44px;
    border:1px solid var(--border); text-align:center;
    background:linear-gradient(120deg, #EFEBFE 0%, #F5F1FF 55%, #FDF0F7 100%);
    margin-block:46px 10px;
  }
  .signup > div{position:relative; z-index:1; max-width:46ch; margin-inline:auto;}
  .signup h2{font-size:clamp(1.5rem, 2.6vw, 1.95rem); font-weight:800;}
  .signup p{margin:11px 0 0; color:var(--ink-muted); font-weight:700; line-height:1.6;}
  .signup form{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px;}
  .signup input{
    flex:1 1 260px; max-width:330px; border:2px solid var(--border-strong); background:var(--surface);
    border-radius:999px; padding:13px 20px; font:inherit; font-weight:700; color:var(--ink); outline:0;
  }
  .signup input:focus{border-color:var(--peri);}
  .signup input::placeholder{color:var(--ink-faint); font-weight:600;}
  .signup .consent{
    display:flex; gap:10px; align-items:flex-start; justify-content:center; text-align:left;
    margin-top:16px; font-size:0.82rem; font-weight:700; color:var(--ink-muted); max-width:46ch; margin-inline:auto;
  }
  .signup .consent input{flex:0 0 auto; width:18px; height:18px; max-width:none; padding:0; accent-color:var(--pink);}
  .signup .note{margin-top:14px; font-size:0.86rem; font-weight:700; color:var(--leaf); display:none;}
  .signup .note.show{display:block;}
  .signup .err{margin-top:10px; font-size:0.84rem; font-weight:700; color:var(--pink-deep); display:none;}
  .signup .err.show{display:block;}
  @media (max-width:640px){ .signup{padding:32px 20px 36px;} }

  /* ---------- footer contact ---------- */
  .contact{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; max-width:30ch;}
  .contact li{display:flex; gap:10px; align-items:flex-start;}
  .contact .ci{
    width:30px; height:30px; border-radius:10px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--pink);
  }
  .contact a, .contact address{font-style:normal; font-size:0.9rem; font-weight:700; color:var(--ink-muted); line-height:1.5; text-decoration:none; padding-top:4px;}
  .contact a:hover{color:var(--pink);}
  @media (max-width:760px){ .contact{max-width:none;} }

  .social{display:flex; gap:10px;}
  .social a{
    width:34px; height:34px; border-radius:50%; border:2px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center; color:var(--ink-muted); text-decoration:none;
  }
  .social a:hover{border-color:var(--pink); color:var(--pink);}