/* Blog — NIGHTSHIFT page-specific rules */
.hero{position:relative;min-height:clamp(600px,82svh,820px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:150px 0 80px}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:35% 50%;opacity:.8}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,#05070C 20%,rgba(5,7,12,.84) 42%,rgba(5,7,12,.3) 70%,rgba(5,7,12,.05) 100%),linear-gradient(180deg,rgba(5,7,12,.7) 0%,rgba(5,7,12,0) 28%,rgba(5,7,12,0) 60%,#05070C 100%)}
.sweep{position:absolute;top:0;bottom:0;left:0;width:260px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:sweep 5.5s var(--ease) 1.4s 1 both;pointer-events:none}
.w{display:inline-block}
.hero h1{margin:26px 0 34px}
.hero .lead{max-width:46ch}
.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.filters .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;min-height:104px;padding:20px 0;flex-wrap:wrap}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);font-size:15px;font-weight:500;color:var(--ink2);transition:border-color .2s,color .2s,background .2s}
.pill:hover{border-color:#fff;color:#fff}
.pill.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.search{display:flex;gap:8px;align-items:center}
.search .input{min-height:48px;height:48px;font-size:15px;width:280px}
.search .input:hover{border-color:rgba(255,255,255,.34)}
.sbtn{width:48px;height:48px;flex:none;border-radius:6px;border:1px solid var(--line2);background:transparent;color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.sbtn:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
.sbtn svg{width:18px;height:18px}
.featured{padding:80px 0 16px}
.fpost{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(480px,50vw,680px);padding:clamp(24px,3.9vw,56px);border-radius:12px;overflow:hidden;background:var(--bg2)}
.fpost img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;transition:transform 1.4s var(--ease)}
.fpost:hover img{transform:scale(1.05)}
.fpost .s{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,12,.96) 0%,rgba(5,7,12,.7) 50%,rgba(5,7,12,.15) 100%),linear-gradient(180deg,rgba(5,7,12,.2),rgba(5,7,12,.7) 100%)}
.fpost .c{position:relative;max-width:800px}
.fpost .top{position:absolute;left:clamp(24px,3.9vw,56px);top:clamp(24px,3.4vw,48px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fpost h3{font-size:clamp(30px,4.2vw,60px);margin:18px 0 22px;max-width:16ch}
.fpost .body{max-width:56ch}
.pin{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pin svg{width:14px;height:14px;color:var(--blue-text)}
.meta{display:flex;align-items:center;gap:12px 22px;margin-top:24px;flex-wrap:wrap}
.meta .avatar,.pmeta .avatar{width:36px;height:36px;font-size:12px}
.meta .n{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--ink2)}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);font-weight:600;font-size:15px;color:var(--ink);transition:border-color .2s,background .2s;margin-top:28px}
.chip svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.fpost:hover .chip{border-color:#fff;background:rgba(255,255,255,.06)}
.fpost:hover .chip svg{transform:translateX(4px)}
.posts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.post{display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--line);background:var(--bg2);overflow:hidden;transition:border-color .3s}
.post:hover{border-color:var(--line2)}
.post.wide{grid-column:span 2;flex-direction:row}
.tile{position:relative;background:#101728;height:clamp(220px,20vw,280px);flex:none;overflow:hidden;border-bottom:1px solid var(--line)}
.post.wide .tile{width:400px;height:auto;border-bottom:0;border-right:1px solid var(--line)}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 100% 100%,rgba(23,54,255,.28),transparent 70%)}
.tile .n{position:absolute;right:28px;bottom:6px;font-family:'Funnel Display','Funnel Display Fallback',sans-serif;font-weight:300;font-size:clamp(140px,14vw,200px);letter-spacing:-.06em;line-height:1;color:var(--blue-text);font-variant-numeric:tabular-nums;transition:transform 1.2s var(--ease)}
.post:hover .tile .n{transform:translateY(-8px)}
.tile .tag{position:absolute;left:28px;top:26px}
.post .c{padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px) clamp(24px,2.6vw,36px);display:flex;flex-direction:column;flex:1;min-width:0}
.post h3{font-size:clamp(24px,2vw,28px);letter-spacing:-.02em;line-height:1.12;margin-bottom:14px}
.post.wide h3{font-size:clamp(28px,2.8vw,40px);max-width:18ch}
.post .body{font-size:16px;margin-bottom:auto;padding-bottom:28px}
.pmeta{display:flex;align-items:center;gap:10px 18px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.pmeta .n{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink2);margin-right:auto}
.pages{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:64px}
.pg{width:52px;height:52px;border-radius:6px;border:1px solid var(--line2);display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--ink2);transition:border-color .2s,color .2s,background .2s}
.pg svg{width:18px;height:18px}
.pg:hover{border-color:#fff;color:#fff}
.pg.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.pg.is-disabled{opacity:.35;pointer-events:none}
.band{position:relative;overflow:hidden;min-height:clamp(520px,47vw,680px);display:flex;align-items:center}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.band .s{position:absolute;inset:0;background:linear-gradient(90deg,#05070C 12%,rgba(5,7,12,.86) 48%,rgba(5,7,12,.3) 100%),linear-gradient(180deg,#05070C 0%,rgba(5,7,12,0) 30%,rgba(5,7,12,0) 70%,#05070C 100%)}
.band .c{position:relative;width:100%;max-width:840px;padding:clamp(80px,9vw,120px) clamp(20px,5.5vw,80px)}
.band .lead{max-width:40ch}
.form-row{display:flex;gap:12px;max-width:600px;margin-top:40px}
.form-row .input{flex:1;min-width:0}
.form-row .btn{flex:none}
.band .mono{margin-top:20px}
@media (max-width:980px){
  .search{width:100%}
  .search .input{width:100%;flex:1;min-width:0}
}
@media (max-width:820px){
  .post.wide{flex-direction:column}
  .post.wide .tile{width:auto;height:clamp(220px,20vw,280px);border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:700px){.hero{padding-top:120px}.featured{padding-top:56px}}
@media (max-width:660px){
  .posts{grid-template-columns:1fr}
  .post.wide{grid-column:auto}
}
@media (max-width:520px){.form-row{flex-direction:column}.form-row .btn{width:100%}}
/* the watermark index number is drawn at 140px+; on a phone it filled the tile and clipped */
@media (max-width:640px){.tile .n{font-size:88px;right:18px;bottom:2px;opacity:.55}}