/* Nagdy Notes — Direction C (Feed) on the Evolved Blue identity.
   ponytail: one stylesheet; local :root tokens mirror theme.json (and dodge the
   --bg-2 kebab gotcha). Styles target core block classes + nx-* hooks. */
:root{
	--bg:#0a0b0d;--bg2:#101218;--surface:#14161c;--line:rgba(255,255,255,.09);
	--txt:#f3f5f8;--muted:#9aa1ad;--faint:#5c636f;--blue:#2f6bff;--bright:#4f82ff;--success:#37d67a;
	--disp:var(--wp--preset--font-family--display,"Space Grotesk",system-ui,sans-serif);
	--body:var(--wp--preset--font-family--body,"IBM Plex Sans",system-ui,sans-serif);
	--mono:var(--wp--preset--font-family--mono,"IBM Plex Mono",ui-monospace,monospace);
}
body{background:var(--bg);color:var(--txt)}
a{text-decoration:none}

/* Sticky footer: a short post still pins the footer to the viewport bottom.
   Block themes wrap everything in .wp-site-blocks (header · main · footer). */
.wp-site-blocks{display:flex;flex-direction:column;min-height:100vh}
.wp-site-blocks > main{flex:1 0 auto}

/* ---------- chrome: header + footer ---------- */
.nx-header{border-block-end:1px solid var(--line);position:sticky;inset-block-start:0;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(8px);z-index:20}
.nx-bar,.nx-foot{max-width:1140px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px);display:flex;align-items:center;gap:26px}
.nx-bar{height:64px}
.nx-brand{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;font-size:18px;color:var(--txt)}
.nx-brand b{color:var(--bright);font-weight:700}
.nx-nav{display:flex;gap:22px;font-size:15px}
.nx-nav a{color:var(--muted)}.nx-nav a:hover{color:var(--txt)}
.nx-spacer{flex:1}
.nx-footer{border-block-start:1px solid var(--line);margin-block-start:40px}
.nx-foot{padding-block:30px;flex-wrap:wrap}
.nx-copy{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* ---------- shared layout ---------- */
.nx-main{padding-inline:clamp(20px,5vw,40px);padding-block:0 70px}
.nx-eyebrow{font-family:var(--mono);font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.nx-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success)}
.nx-ixhead{padding-block:64px 14px}
.nx-title{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.02;font-size:clamp(44px,6vw,62px);margin:12px 0 0}

/* topic chips (core/categories) */
.nx-topics{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nx-topics li{margin:0}
.nx-topics a{font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;display:inline-block}
.nx-topics a:hover{border-color:var(--blue);color:var(--bright)}

/* ---------- feed grid (featured first + 2-col) ---------- */
.nx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.nx-grid>li{margin:0}
.nx-cell{background:var(--bg);height:100%;padding:22px 24px}
.nx-cell:hover{background:color-mix(in srgb,var(--blue) 5%,transparent)}
.nx-kick{font-family:var(--mono);font-size:12px;color:var(--faint);gap:12px;margin-block-end:9px;align-items:center}
.nx-kick .nx-cat,.nx-kick .nx-cat a{color:var(--bright)}
.nx-kick .wp-block-post-terms__separator{color:var(--faint)}
.nx-cardtitle{font-family:var(--disp);font-weight:600;letter-spacing:-.01em;font-size:21px;line-height:1.18;margin:0}
.nx-cardtitle a{color:var(--txt)}
.nx-cell:hover .nx-cardtitle a{color:var(--bright)}
.nx-ex{margin:7px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.nx-ex .wp-block-post-excerpt__more-link{display:none}
.nx-cover{display:none}

/* featured = first entry: spans both tracks, cover beside meta */
.nx-grid>li:first-child{grid-column:1 / -1}
.nx-grid>li:first-child .nx-cell{display:grid;grid-template-columns:1.2fr 1fr;gap:0;padding:0;align-items:stretch}
.nx-grid>li:first-child .nx-cover{display:block;min-height:280px;background:linear-gradient(150deg,var(--surface),var(--bg));position:relative;overflow:hidden}
.nx-grid>li:first-child .nx-cover .wp-block-post-featured-image,
.nx-grid>li:first-child .nx-cover a,
.nx-grid>li:first-child .nx-cover img{display:block;width:100%;height:100%;margin:0}
.nx-grid>li:first-child .nx-cover img{object-fit:cover}
.nx-grid>li:first-child .nx-cellbody{padding:28px;align-self:center}
.nx-grid>li:first-child .nx-cardtitle{font-size:30px;line-height:1.1;margin-block-end:10px}
.nx-grid>li:first-child .nx-ex{font-size:16px}

/* pagination + empty */
.nx-pager{margin-block-start:28px;font-family:var(--mono);font-size:13px}
.nx-pager a,.nx-pager .wp-block-query-pagination-numbers{color:var(--muted)}
.nx-pager a:hover{color:var(--bright)}
.nx-pager .current{color:var(--txt)}
.nx-empty{color:var(--muted);font-family:var(--mono);padding:40px 0}

/* ---------- article ---------- */
.nx-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--blue),var(--bright));z-index:30}
@supports (animation-timeline: scroll()){
	.nx-progress{animation:nx-grow linear;animation-timeline:scroll(root block)}
	@keyframes nx-grow{to{transform:scaleX(1)}}
}
.nx-art{max-width:720px;margin-inline:auto;padding-block:54px 90px}
.nx-art .nx-kick{font-family:var(--mono);font-size:12px;color:var(--faint);display:block;margin:0}
.nx-art .nx-kick::before{content:"// notes  "}
.nx-art .nx-kick a{color:var(--bright)}
.nx-arttitle{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.06;font-size:clamp(36px,5vw,52px);margin:14px 0 20px}
.nx-byline{gap:10px;align-items:center;color:var(--muted);font-family:var(--mono);font-size:13.5px;padding-block-end:26px;border-block-end:1px solid var(--line);margin-block-end:34px}
.nx-byline .wp-block-post-author__byline{display:none}
.nx-byline .wp-block-post-author{display:flex;align-items:center;gap:8px;margin:0}
.nx-byline .wp-block-post-author__avatar img{border-radius:50%;display:block}
.nx-byline .wp-block-post-author__name,.nx-byline .nx-date{color:var(--txt);font-family:var(--body);font-weight:400}
.nx-arthero{margin:0 0 30px;border-radius:14px;overflow:hidden}
.nx-arthero img{width:100%;height:auto;display:block}

/* long-form body */
.nx-body{font-size:18px;line-height:1.78}
.nx-body>*{margin-block:22px}
.nx-body p{color:#e7e9ee}
.nx-body :where(h2,h3){font-family:var(--disp);letter-spacing:-.015em;line-height:1.2}
.nx-body h2{font-size:28px;margin-block:44px 10px}
.nx-body h3{font-size:22px;margin-block:34px 8px}
.nx-body a{color:var(--bright);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--bright) 40%,transparent)}
.nx-body a:hover{color:var(--blue)}
.nx-body blockquote{margin-inline:0;padding:18px 22px;background:color-mix(in srgb,var(--surface) 70%,transparent);border-inline-start:3px solid var(--blue);border-radius:0 12px 12px 0;color:var(--muted);font-size:19px;line-height:1.5}
.nx-body blockquote p{color:var(--muted);margin:0}
.nx-body :where(code):not(pre code){font-family:var(--mono);font-size:.84em;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--bright)}
.nx-body pre{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;overflow:auto;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:#d7dbe2}
.nx-body :where(ul,ol){padding-inline-start:24px}
.nx-body li{margin-block:9px;color:#e7e9ee}
.nx-body li::marker{color:var(--blue)}
.nx-body img{max-width:100%;height:auto;border-radius:12px}

/* tags + prev/next */
.nx-tags{margin-block-start:46px;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:12px}
.nx-tags a{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.nx-tags a:hover{border-color:var(--blue);color:var(--bright)}
.nx-pn{gap:14px;margin-block-start:22px}
.nx-pn>*{flex:1 1 240px;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.nx-pn .wp-block-post-navigation-link{color:var(--txt);font-family:var(--disp);font-weight:600;font-size:16px}
.nx-pn .wp-block-post-navigation-link a{color:inherit}
.nx-pn .wp-block-post-navigation-link:hover{border-color:var(--blue)}

/* ---------- about page ---------- */
.nx-abouteyebrow{font-family:var(--mono);font-size:12px;color:var(--bright);margin:0}
.nx-about .nx-lead{font-size:21px;line-height:1.5;color:#e7e9ee}

/* ---------- 404 ---------- */
.nx-404{text-align:center}
.nx-404-inner{padding-block:90px 8px}
.nx-404-text{color:var(--muted);max-width:46ch;margin:14px auto 0}
.nx-search{max-width:420px;margin:26px auto 0}
.nx-search .wp-block-search__input{background:var(--surface);border:1px solid var(--line);color:var(--txt);border-radius:10px}
.nx-search .wp-block-search__button{background:var(--blue);color:var(--txt);border:0;border-radius:8px}
.nx-404-home{font-family:var(--mono);font-size:13px;margin-block-start:30px}

/* ---------- responsive ---------- */
@media (max-width:900px){
	.nx-grid{grid-template-columns:1fr}
	.nx-grid>li:first-child .nx-cell{grid-template-columns:1fr}
	.nx-grid>li:first-child .nx-cover{min-height:200px}
	.nx-grid>li:first-child .nx-cellbody{padding:22px 24px}
}
@media (max-width:560px){
	.nx-nav{display:none}
	.nx-ixhead{padding-block:44px 12px}
}
