/* ============================================================
   News Template — Design System
   Namespace: nx-  ·  Modern editorial theme
   Light surface, indigo accent, soft radius cards.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --nx-brand: #1d4ed8;
  --nx-brand-dark: #1e3a8a;
  --nx-brand-soft: #eff4ff;
  --nx-accent: #ea580c;
  --nx-accent-soft: #fff4ec;

  --nx-ink: #0f172a;
  --nx-body: #475569;
  --nx-muted: #8697ad;
  --nx-line: #e3e9f2;
  --nx-line-strong: #cbd5e4;

  --nx-bg: #f5f8fc;
  --nx-surface: #ffffff;
  --nx-surface-2: #f8fafd;
  --nx-dark: #101827;

  --nx-radius: 14px;
  --nx-radius-sm: 9px;
  --nx-radius-lg: 20px;

  --nx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --nx-shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 14px 32px rgba(15, 23, 42, .07);
  --nx-shadow-lg: 0 10px 20px rgba(15, 23, 42, .08), 0 30px 60px rgba(15, 23, 42, .12);

  --nx-maxw: 1240px;
  --nx-gap: 28px;
  --nx-head-h: 68px;

  --nx-serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", serif;
  --nx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* legacy aliases kept for inline templates */
  --primary-color: var(--nx-brand);
  --text-secondary: var(--nx-body);
  --text-muted: var(--nx-muted);
  --transition-fast: .18s ease;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nx-head-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--nx-sans);
  font-size: 16px;
  line-height: 1.68;
  color: var(--nx-body);
  background: var(--nx-bg);
  -webkit-font-smoothing: antialiased;
}

html.nav-open,
html.nav-open body { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--nx-serif);
  color: var(--nx-ink);
  line-height: 1.24;
  margin: 0;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }

a {
  color: var(--nx-brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--nx-brand-dark); }

img { max-width: 100%; height: auto; }
svg { fill: currentColor; }

button { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--nx-line); }

:focus-visible {
  outline: 2px solid var(--nx-brand);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */
.nx-wrap {
  width: 100%;
  max-width: var(--nx-maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.nx-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nx-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
  font-family: var(--nx-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
}

.nx-page { padding: 24px 0 8px; }

/* shared button base */
.nx-submit,
.nx-auth__submit,
.nx-save,
.nx-clear,
.nx-remove,
.nx-avbtn,
.nx-avremove,
.nx-cmt__submit,
.nx-cmt__more button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--nx-radius-sm);
  background: var(--nx-brand);
  color: #fff;
  font-family: var(--nx-sans);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nx-submit:hover,
.nx-auth__submit:hover,
.nx-save:hover,
.nx-cmt__submit:hover,
.nx-avbtn:hover {
  background: var(--nx-brand-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(29, 78, 216, .24);
}
.nx-submit:disabled,
.nx-auth__submit:disabled,
.nx-save:disabled,
.nx-cmt__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.nx-clear,
.nx-remove,
.nx-avremove,
.nx-cmt__more button {
  background: transparent;
  border-color: var(--nx-line-strong);
  color: var(--nx-body);
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
}
.nx-clear:hover,
.nx-avremove:hover,
.nx-cmt__more button:hover { border-color: var(--nx-brand); color: var(--nx-brand); background: var(--nx-brand-soft); }
.nx-remove:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }

/* ============================================================
   MASTHEAD / NAVIGATION
   ============================================================ */
.nx-masthead {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--nx-line);
}

.nx-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: var(--nx-maxw);
  height: var(--nx-head-h);
  margin: 0 auto;
  padding: 0 20px;
}

.nx-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  max-width: 240px;
  font-family: var(--nx-serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-brand:hover { color: var(--nx-brand); }
.nx-logo { max-height: 30px; width: auto; object-fit: contain; }

.nx-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nx-nav__list::-webkit-scrollbar { display: none; }
.nx-nav__list a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--nx-radius-sm);
  color: var(--nx-body);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.nx-nav__list a:hover { color: var(--nx-brand); background: var(--nx-brand-soft); }
.nx-nav__list a.active { color: var(--nx-brand); background: var(--nx-brand-soft); }

.nx-search {
  display: flex;
  align-items: center;
  flex: none;
  width: 210px;
  height: 40px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  background: var(--nx-surface-2);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nx-search:focus-within { border-color: var(--nx-brand); background: #fff; }
.nx-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--nx-ink);
  outline: none;
}
.nx-search input::placeholder { color: var(--nx-muted); }
.nx-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--nx-muted);
  cursor: pointer;
}
.nx-search button:hover { color: var(--nx-brand); background: var(--nx-brand-soft); }
.nx-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

.nx-user { display: flex; align-items: center; gap: 10px; flex: none; }

.nx-signin {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--nx-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.nx-signin:hover { background: var(--nx-brand); color: #fff; }

/* account dropdown */
.nx-menu { position: relative; }
.nx-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--nx-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  max-width: 190px;
}
.nx-menu__trigger:hover { border-color: var(--nx-line-strong); }
.nx-menu__trigger span {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-icon { flex: none; }

.nx-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background: #fff;
  box-shadow: var(--nx-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.nx-menu.open .nx-menu__list { opacity: 1; visibility: visible; transform: translateY(0); }
.nx-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--nx-radius-sm);
  color: var(--nx-body);
  font-size: 14px;
  font-weight: 500;
}
.nx-menu__item:hover { background: var(--nx-brand-soft); color: var(--nx-brand); }
.nx-menu__divider { margin: 6px 4px; border: 0; border-top: 1px solid var(--nx-line); }

/* ---------- mobile nav ---------- */
.nx-mnav { display: none; }
.nx-mnav__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 16px;
}
.nx-mnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-family: var(--nx-serif);
  font-size: 19px;
  font-weight: 800;
  color: var(--nx-ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nx-mnav__brand img { max-height: 26px; }

.nx-ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-sm);
  background: #fff;
  color: var(--nx-ink);
  cursor: pointer;
}
.nx-ibtn:hover { border-color: var(--nx-line-strong); background: var(--nx-surface-2); }
.nx-ibtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.nx-ibtn--menu { flex-direction: column; gap: 4px; padding: 0 10px; }
.nx-ibtn--search { border-radius: 999px; }
.nx-ibtn--menu span {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nx-user--mobile { display: inline-flex; }
.nx-user--mobile .nx-menu__list { top: calc(100% + 10px); }

.nx-mnav__panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 28px;
  background: #fff;
  overflow-y: auto;
}
.nx-mnav__panel[hidden] { display: none; }
.nx-mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-mnav__close {
  padding: 6px 14px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-ink);
  cursor: pointer;
}
.nx-mnav__close:hover { border-color: var(--nx-brand); color: var(--nx-brand); }

.nx-mnav__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin-bottom: 18px;
  padding: 0 16px;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  background: var(--nx-surface-2);
  color: var(--nx-muted);
}
.nx-mnav__search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.nx-mnav__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--nx-ink);
  outline: none;
}

.nx-mnav__links { display: flex; flex-direction: column; }
.nx-mnav__links a {
  padding: 14px 4px;
  border-bottom: 1px solid var(--nx-line);
  color: var(--nx-ink);
  font-family: var(--nx-serif);
  font-size: 19px;
  font-weight: 700;
}
.nx-mnav__links a:hover,
.nx-mnav__links a.active { color: var(--nx-brand); }

/* ============================================================
   PAGE BANNER (PAGE_HERO)
   ============================================================ */
.nx-banner {
  margin: 0 0 8px;
  padding: 44px 0 38px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(112deg, var(--nx-brand-dark) 0%, var(--nx-brand) 58%, #2f6bff 100%);
  color: #fff;
}
.nx-banner__inner {
  width: 100%;
  max-width: var(--nx-maxw);
  margin: 0 auto;
  padding: 0 20px;
}
.nx-banner__body { max-width: 78ch; }
.nx-banner__body h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.nx-banner__body h1::after {
  content: "";
  display: block;
  width: 62px; height: 4px;
  margin-top: 20px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
}
.nx-banner__body h2,
.nx-banner__body h3,
.nx-banner__body h4 { color: #fff; }
.nx-banner__body p {
  margin: 18px 0 0;
  font-size: 17.5px;
  color: rgba(255, 255, 255, .86);
}
.nx-banner__body a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nx-banner__body a:hover { color: rgba(255, 255, 255, .78); }
.nx-banner__body ul,
.nx-banner__body ol { margin: 14px 0 0; padding-left: 22px; color: rgba(255, 255, 255, .86); }
.nx-banner__body li { margin: 5px 0; }

/* ============================================================
   HOMEPAGE LAYOUT
   ============================================================ */
main:has(.nx-hero) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: var(--nx-gap);
  max-width: var(--nx-maxw);
  margin: 0 auto;
  padding: 24px 20px 8px;
}
main:has(.nx-hero) .nx-wrap { max-width: none; margin: 0; padding: 0; }
main:has(.nx-hero) .nx-hero,
main:has(.nx-hero) .nx-banner,
main:has(.nx-hero) .nx-sec--feature,
main:has(.nx-hero) .nx-sec--stream { grid-column: 1 / -1; }
main:has(.nx-hero) .nx-sec--magazine { grid-column: 1 / 2; }
main:has(.nx-hero) .nx-sec--split,
main:has(.nx-hero) .nx-sec--compact { grid-column: 2 / 3; }
main:has(.nx-hero) .nx-sec { margin-bottom: 0; }
main:has(.nx-hero) .nx-sec--split .nx-cols { grid-template-columns: 1fr; gap: 0; }
main:has(.nx-hero) .nx-sec--split .nx-cols__item::after { display: none; }
main:has(.nx-hero) .nx-sec--compact .nx-compact { grid-template-columns: 1fr 1fr; }

/* ---------- hero: full-width editorial (lead + picks + briefs) ---------- */
.nx-hero { margin-bottom: 14px; }
.nx-hero .nx-wrap {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* 1 — lead story: centered masthead copy over a full-bleed cover */
.nx-lead { min-width: 0; text-align: center; }
.nx-lead__kicker { margin-bottom: 16px; }
.nx-lead__title {
  margin: 0 auto 14px;
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.nx-lead__title a { color: inherit; }
.nx-lead__title a:hover { color: var(--nx-brand); }
.nx-lead__deck {
  margin: 0 auto 16px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.62;
  color: var(--nx-body);
}
.nx-lead__meta { justify-content: center; margin-bottom: 26px; }
.nx-lead__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface-2);
  box-shadow: var(--nx-shadow-sm);
}
.nx-lead__img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-lead__figure:hover .nx-lead__img { transform: scale(1.03); }

/* 2 — secondary picks: 4-up cards, image above headline */
.nx-picks { min-width: 0; }
.nx-picks__title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--nx-ink);
  font-family: var(--nx-sans);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nx-brand);
}
.nx-picks__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.nx-pick {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  color: var(--nx-ink);
}
.nx-pick__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
}
.nx-pick__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.nx-pick:hover .nx-pick__img { transform: scale(1.05); }
.nx-pick__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nx-pick__title {
  font-family: var(--nx-serif);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.36;
  display: -webkit-box;
  -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}
.nx-pick:hover .nx-pick__title { color: var(--nx-brand); }
.nx-pick .nx-meta__date { font-size: 12px; color: var(--nx-muted); }

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.nx-sec { margin-bottom: 46px; }
.nx-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--nx-ink);
}
.nx-sec__head h2 {
  flex: 1;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.015em;
}
.nx-sec__head h2 a { color: var(--nx-ink); }
.nx-sec__head h2 a:hover { color: var(--nx-brand); }
.nx-sec__desc { flex: none; font-size: 14px; color: var(--nx-muted); }
.nx-sec__more {
  flex: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nx-brand);
}
.nx-sec__more::after { content: " \203A"; }
.nx-sec__body { display: block; }

/* ---------- feature (lead + card grid) ---------- */
.nx-sec--feature .nx-sec__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.nx-feature {
  display: block;
  padding: 18px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.nx-feature:hover { transform: translateY(-3px); box-shadow: var(--nx-shadow); }
.nx-feature__media {
  overflow: hidden;
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
}
.nx-feature__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-feature:hover .nx-feature__img { transform: scale(1.04); }
.nx-feature__title {
  margin: 16px 0 10px;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.24;
}
.nx-feature:hover .nx-feature__title { color: var(--nx-brand); }
.nx-feature__summary {
  margin: 0 0 12px;
  font-size: 15.5px;
  color: var(--nx-body);
}

/* ---------- card grid ---------- */
.nx-sec--feature .nx-feature { grid-column: 1; }
.nx-sec--feature .nx-cards {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nx-sec--feature .nx-card { min-width: 0; }

.nx-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nx-card:hover { transform: translateY(-3px); box-shadow: var(--nx-shadow); }
.nx-card__media {
  overflow: hidden;
  border-radius: var(--nx-radius-sm);
  background: var(--nx-surface-2);
}
.nx-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-card:hover .nx-card__img { transform: scale(1.05); }
.nx-card__title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.36;
  color: var(--nx-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-card:hover .nx-card__title { color: var(--nx-brand); }

/* ---------- magazine rows ---------- */
.nx-sec--magazine .nx-sec__body { display: flex; flex-direction: column; gap: 22px; }
.nx-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--nx-line);
}
.nx-row:last-child { border-bottom: 0; padding-bottom: 0; }
/* alternate media left/right on even rows */
.nx-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) 220px; }
.nx-row:nth-child(even) .nx-row__media { order: 2; }
.nx-row:nth-child(even) .nx-row__body { order: 1; }
main:has(.nx-hero) .nx-row { grid-template-columns: 150px minmax(0, 1fr); }
main:has(.nx-hero) .nx-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) 150px; }
.nx-row__media {
  overflow: hidden;
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
}
.nx-row__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-row:hover .nx-row__img { transform: scale(1.05); }
.nx-row__body { min-width: 0; }
.nx-row__title {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.3;
  transition: color var(--transition-fast);
}
.nx-row:hover .nx-row__title { color: var(--nx-brand); }
.nx-row__summary {
  margin: 8px 0 10px;
  font-size: 15px;
  color: var(--nx-body);
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- split columns ---------- */
.nx-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.nx-cols__item {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--nx-line);
  color: var(--nx-ink);
}
.nx-cols__title {
  font-family: var(--nx-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
  transition: color var(--transition-fast);
}
.nx-cols__item:hover .nx-cols__title { color: var(--nx-brand); }

/* ---------- stream feed ---------- */
.nx-sec--stream .nx-sec__body { display: flex; flex-direction: column; }
.nx-feed__item {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--nx-line);
  color: var(--nx-ink);
}
.nx-feed__item:first-child { padding-top: 0; }
.nx-feed__media {
  overflow: hidden;
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
}
.nx-feed__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-feed__item:hover .nx-feed__img { transform: scale(1.05); }
.nx-feed__body { min-width: 0; }
.nx-feed__title {
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.3;
  transition: color var(--transition-fast);
}
.nx-feed__item:hover .nx-feed__title { color: var(--nx-brand); }
.nx-feed__summary {
  margin: 8px 0 10px;
  font-size: 15px;
  color: var(--nx-body);
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- compact grid / mini / rank ---------- */
.nx-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nx-mini { display: block; color: var(--nx-ink); }
.nx-mini__media {
  overflow: hidden;
  border-radius: var(--nx-radius-sm);
  background: var(--nx-surface-2);
}
.nx-mini__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-mini:hover .nx-mini__img { transform: scale(1.06); }
.nx-mini__title {
  margin-top: 8px;
  font-family: var(--nx-sans);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-mini:hover .nx-mini__title { color: var(--nx-brand); }

.nx-rank { list-style: none; margin: 0; padding: 0; }
.nx-rank li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--nx-line);
}
.nx-rank li:last-child { border-bottom: 0; }
.nx-rank__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 25px; height: 25px;
  border-radius: 8px;
  background: var(--nx-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}
.nx-rank a { color: var(--nx-ink); font-weight: 600; font-size: 15px; line-height: 1.4; }
.nx-rank a:hover { color: var(--nx-brand); }

/* ============================================================
   META LINE
   ============================================================ */
.nx-meta,
.nx-lead__meta,
.nx-card__meta,
.nx-feature__meta,
.nx-row__meta,
.nx-feed__meta,
.nx-cols__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 12.5px;
  color: var(--nx-muted);
}
.nx-meta__author,
.nx-meta__views,
.nx-meta__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nx-meta__author svg,
.nx-meta__views svg,
.nx-meta__date svg { width: 13px; height: 13px; flex: none; }

/* ============================================================
   CATEGORY
   ============================================================ */
.nx-catbar {
  position: sticky;
  top: var(--nx-head-h);
  z-index: 60;
  margin-bottom: 26px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nx-line);
}
.nx-catbar__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nx-catbar__list::-webkit-scrollbar { display: none; }
.nx-catbar__link {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line);
  color: var(--nx-body);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.nx-catbar__link:hover { border-color: var(--nx-brand); color: var(--nx-brand); }
.nx-catbar__link.is-active {
  background: var(--nx-brand);
  border-color: var(--nx-brand);
  color: #fff;
}

.nx-pagehead {
  padding: 30px 0 26px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--nx-line);
}
.nx-pagehead__title {
  margin: 14px 0 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.025em;
}
.nx-pagehead__title::after {
  content: "";
  display: block;
  width: 58px; height: 4px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--nx-brand);
}
.nx-pagehead__sub { margin: 16px 0 0; max-width: 62ch; font-size: 17px; }
.nx-pagetitle {
  margin: 14px 0 26px;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- post grid ---------- */
.nx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}
.nx-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nx-post:hover { transform: translateY(-4px); box-shadow: var(--nx-shadow); }
.nx-post__media {
  display: block;
  overflow: hidden;
  background: var(--nx-surface-2);
}
.nx-post__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-post:hover .nx-post__img { transform: scale(1.05); }
.nx-post__body { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.nx-post__title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.32;
}
.nx-post__title a { color: var(--nx-ink); }
.nx-post:hover .nx-post__title a { color: var(--nx-brand); }
.nx-post__summary {
  margin: 0;
  font-size: 14.5px;
  color: var(--nx-body);
  display: -webkit-box;
  -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   PAGINATION (markup injected via {$paginationHtml})
   Class names are produced by the backend and kept as-is.
   ============================================================ */
.pagination-container { margin: 4px 0 10px; }
.pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination-item { display: inline-flex; }

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-sm);
  background: var(--nx-surface);
  color: var(--nx-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast), transform var(--transition-fast);
}
.pagination-link:hover {
  border-color: var(--nx-brand);
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
  transform: translateY(-1px);
}

/* current page */
.pagination-item.active .pagination-link,
.pagination-link.current {
  border-color: var(--nx-brand);
  background: var(--nx-brand);
  color: #fff;
  cursor: default;
}
.pagination-item.active .pagination-link:hover,
.pagination-link.current:hover { transform: none; }

/* prev / next arrows */
.pagination-link.prev,
.pagination-link.next { padding: 0 12px; font-size: 20px; line-height: 1; }

/* disabled state */
.pagination-link.disabled,
.pagination-link.prev.disabled,
.pagination-link.next.disabled {
  border-color: var(--nx-line);
  background: var(--nx-surface-2);
  color: var(--nx-line-strong);
  cursor: not-allowed;
  pointer-events: none;
}

/* gap / ellipsis items */
.pagination-item.disabled > span:not(.pagination-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px; height: 42px;
  color: var(--nx-muted);
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================
   ARTICLE (detail)
   ============================================================ */
.nx-head { padding: 22px 0 0; }
.nx-crumbs { margin: 0 0 18px; }
.nx-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}
.nx-crumbs__item { display: inline-flex; align-items: center; }
.nx-crumbs__item a { color: var(--nx-muted); font-weight: 600; }
.nx-crumbs__item a:hover { color: var(--nx-brand); }
.nx-crumbs__item span[aria-current="page"] { color: var(--nx-body); font-weight: 700; }
.nx-crumbs__sep { color: var(--nx-line-strong); font-size: 13px; user-select: none; }

.nx-head__title {
  margin: 16px 0 0;
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.025em;
}
.nx-head__sub {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: 18px;
  color: var(--nx-body);
}
.nx-head .nx-meta { margin-top: 18px; }
.nx-head__jump { margin-top: 16px; }
.nx-head__figure {
  margin: 26px 0 0;
  overflow: hidden;
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface-2);
  box-shadow: var(--nx-shadow-sm);
}
.nx-head__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s ease;
}
.nx-head__figure:hover img { transform: scale(1.03); }

.nx-split2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
  padding: 32px 0 8px;
}

.nx-body {
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
  color: var(--nx-ink);
  font-size: 17px;
  line-height: 1.8;
}
.nx-body > *:first-child { margin-top: 0; }
.nx-body h2,
.nx-body h3 {
  margin: 1.6em 0 .6em;
  scroll-margin-top: calc(var(--nx-head-h) + 20px);
  text-wrap: balance;
}
.nx-body h2 { font-size: 1.5rem; }
.nx-body h3 { font-size: 1.22rem; }
.nx-body p { margin: 0 0 1.15em; text-wrap: pretty; }
.nx-body a { text-decoration: underline; text-underline-offset: 2px; }
.nx-body img { border-radius: var(--nx-radius); margin: 8px 0; max-width: 100%; height: auto; }
.nx-body ul,
.nx-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.nx-body li { margin: .35em 0; }
.nx-body > p,
.nx-body > ul,
.nx-body > ol,
.nx-body > h2,
.nx-body > h3 { max-width: 72ch; }
.nx-body blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 4px solid var(--nx-brand);
  border-radius: 0 var(--nx-radius-sm) var(--nx-radius-sm) 0;
  background: var(--nx-brand-soft);
  color: var(--nx-ink);
  font-style: italic;
}
.nx-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; }
.nx-body th,
.nx-body td { padding: 10px 12px; border-bottom: 1px solid var(--nx-line); text-align: left; }
.nx-body th { background: var(--nx-surface-2); font-weight: 700; color: var(--nx-ink); }

/* ---------- fact card ---------- */
.nx-side { position: sticky; top: calc(var(--nx-head-h) + 20px); }
.nx-facts {
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
  overflow: hidden;
}
.nx-facts__head {
  padding: 14px 18px;
  background: var(--nx-ink);
}
.nx-facts__title {
  font-family: var(--nx-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.nx-facts__list { margin: 0; padding: 6px 18px 14px; }
.nx-facts__list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--nx-line);
}
.nx-facts__list > div:last-child { border-bottom: 0; }
.nx-facts__list dt {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-facts__list dd {
  margin: 0;
  text-align: right;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nx-ink);
  overflow-wrap: anywhere;
}
.nx-facts__foot { padding: 12px 18px; border-top: 1px solid var(--nx-line); background: var(--nx-surface-2); }

/* ---------- related ---------- */
.nx-related { padding: 12px 0 40px; }
.nx-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.nx-related__grid .nx-card { padding: 12px; }

/* ============================================================
   COMMENTS
   ============================================================ */
.nx-cmt { padding: 12px 0 46px; }
.nx-cmt__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--nx-ink);
}
.nx-cmt__head h2 { flex: 1; font-size: 1.4rem; font-weight: 800; }
.nx-cmt__count {
  min-width: 30px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.nx-cmt__login {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px dashed var(--nx-line-strong);
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
  font-size: 14.5px;
}
.nx-cmt__form {
  margin-bottom: 26px;
  padding: 20px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
}
.nx-cmt__field { margin-bottom: 16px; }
.nx-cmt__field > label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-cmt__input {
  width: 100%;
  min-height: 104px;
  padding: 12px 14px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-sm);
  background: var(--nx-surface-2);
  font: inherit;
  font-size: 15px;
  color: var(--nx-ink);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nx-cmt__input:focus { border-color: var(--nx-brand); background: #fff; }

.nx-cmt__list { display: flex; flex-direction: column; gap: 16px; }
.nx-cmt__item {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background: var(--nx-surface);
}
.nx-cmt__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
}
.nx-cmt__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nx-cmt__body { flex: 1; min-width: 0; }
.nx-cmt__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.nx-cmt__name { font-size: 15px; font-weight: 700; color: var(--nx-ink); }
.nx-cmt__date { font-size: 12.5px; color: var(--nx-muted); }
.nx-cmt__stars { margin-bottom: 6px; line-height: 1; }
.nx-cmt__text { font-size: 15px; color: var(--nx-body); overflow-wrap: anywhere; }
.nx-cmt__del {
  margin-left: auto;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--nx-muted);
  font-size: 12px;
  cursor: pointer;
}
.nx-cmt__del:hover { color: #dc2626; background: #fef2f2; }

.nx-cmt__more { margin-top: 20px; text-align: center; }

.nx-rate { display: inline-flex; gap: 4px; }
.nx-rate__star {
  font-size: 22px;
  line-height: 1;
  color: var(--nx-line-strong);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.nx-rate__star:hover { transform: scale(1.12); }
.nx-rate__star.is-active { color: #f59e0b; }
.nx-cmt__stars .nx-rate__star { font-size: 14px; cursor: default; }

/* ============================================================
   PROSE / LEGAL
   ============================================================ */
.nx-doc { padding: 30px 0 20px; }
.nx-doc__shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
}
.nx-doc__title { margin: 14px 0 18px; font-size: 2.1rem; font-weight: 800; }
.nx-doc__lead {
  margin: 0 0 26px;
  padding: 14px 18px;
  border-left: 4px solid var(--nx-brand);
  border-radius: 0 var(--nx-radius-sm) var(--nx-radius-sm) 0;
  background: var(--nx-brand-soft);
  font-size: 16.5px;
  color: var(--nx-ink);
}
.nx-doc__copy { font-size: 16.5px; line-height: 1.78; }
.nx-prose h1 { margin: 0 0 .8em; font-size: 2rem; }
.nx-prose h2 { margin: 1.6em 0 .6em; font-size: 1.5rem; }
.nx-prose h3 { margin: 1.4em 0 .5em; font-size: 1.18rem; }
.nx-prose p { margin: 0 0 1em; }
.nx-prose ul,
.nx-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.nx-prose li { margin: .3em 0; }
.nx-prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   CONTACT
   ============================================================ */
.nx-contact { padding: 30px 0 20px; }
.nx-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: start;
}
.nx-contact__intro { font-size: 16.5px; }
.nx-contact__details { margin: 24px 0 0; }
.nx-detail {
  padding: 13px 0;
  border-bottom: 1px solid var(--nx-line);
}
.nx-detail dt {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-detail dd { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.nx-contact__card {
  padding: 26px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
}
.nx-contact__form { display: block; }
.nx-contact__form .nx-submit { margin-top: 8px; }
.nx-contact__note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--nx-muted);
}

/* ---------- fields ---------- */
.nx-field { margin-bottom: 16px; }
.nx-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-field input,
.nx-field textarea,
.nx-form__group input,
.nx-form__group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-sm);
  background: var(--nx-surface-2);
  font: inherit;
  font-size: 15px;
  color: var(--nx-ink);
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.nx-field textarea,
.nx-form__group textarea { min-height: 124px; resize: vertical; }
.nx-field input:focus,
.nx-field textarea:focus,
.nx-form__group input:focus,
.nx-form__group textarea:focus {
  border-color: var(--nx-brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.nx-field input[disabled],
.nx-form__group input[disabled] {
  background: var(--nx-surface-2);
  color: var(--nx-muted);
  cursor: not-allowed;
}
.nx-hint { margin: 8px 0 0; font-size: 13px; color: var(--nx-muted); }

.nx-inputwrap { position: relative; }
.nx-inputwrap input { padding-right: 46px; }
.nx-peek {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--nx-muted);
  cursor: pointer;
}
.nx-peek:hover { color: var(--nx-brand); background: var(--nx-brand-soft); }
.nx-peek svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ============================================================
   AUTH
   ============================================================ */
.nx-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nx-head-h) - 120px);
  padding: 40px 20px;
}
.nx-auth__card {
  width: 100%;
  max-width: 452px;
  padding: 34px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow);
}
.nx-auth__brand { text-align: center; margin-bottom: 24px; }
.nx-auth__brand svg {
  width: 46px; height: 46px;
  fill: none;
  stroke: var(--nx-brand);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.nx-auth__brand h1 { margin: 12px 0 6px; font-size: 1.75rem; font-weight: 800; }
.nx-auth__brand p { margin: 0; font-size: 14.5px; color: var(--nx-muted); }

.nx-auth__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  padding: 5px;
  border-radius: 999px;
  background: var(--nx-surface-2);
}
.nx-auth__tab {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--nx-body);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nx-auth__tab.active { background: var(--nx-brand); color: #fff; }

.nx-auth__form { display: none; }
.nx-auth__form.active { display: block; }
.nx-auth__submit { width: 100%; margin-top: 6px; }
.nx-auth__switch {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--nx-muted);
}
.nx-auth__switch a { font-weight: 700; }

/* ============================================================
   ACCOUNT (profile)
   ============================================================ */
.nx-acct { padding: 30px 0 20px; }
.nx-acct__wrap {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.nx-acct__side {
  position: sticky;
  top: calc(var(--nx-head-h) + 20px);
  padding: 24px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
}
.nx-acct__head { display: flex; align-items: center; gap: 14px; }
.nx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
}
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nx-acct__info { min-width: 0; }
.nx-acct__info h2 { font-size: 1.1rem; overflow-wrap: anywhere; }
.nx-acct__info p { margin: 2px 0 0; font-size: 13.5px; color: var(--nx-muted); overflow-wrap: anywhere; }

.nx-acctnav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--nx-line);
}
.nx-acctnav__item {
  padding: 10px 14px;
  border: 0;
  border-radius: var(--nx-radius-sm);
  background: none;
  text-align: left;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nx-body);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nx-acctnav__item:hover { background: var(--nx-surface-2); color: var(--nx-ink); }
.nx-acctnav__item.active { background: var(--nx-brand-soft); color: var(--nx-brand); font-weight: 700; }

.nx-acct__main { min-width: 0; }
.nx-acct__content {
  padding: 28px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-sm);
}
.nx-panel { display: none; }
.nx-panel.active { display: block; }
.nx-panel__title { font-size: 1.3rem; font-weight: 800; }
.nx-panel__subtitle { margin-top: 30px; }
.nx-panel__actions { margin-top: 20px; }

.nx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 26px;
}
.nx-stat {
  padding: 18px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
  text-align: center;
}
.nx-stat__num {
  font-family: var(--nx-serif);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--nx-ink);
  line-height: 1.2;
}
.nx-stat__label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nx-muted);
}

.nx-form { margin-top: 8px; }
.nx-form__group { margin-bottom: 16px; }
.nx-form__group > label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nx-muted);
}

.nx-avsec {
  margin: 22px 0 26px;
  padding: 18px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
}
.nx-avsec__head { margin-bottom: 14px; }
.nx-avsec__title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-avsec__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-avprev { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nx-avprev__img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  flex: none;
  border-radius: 50%;
  background: var(--nx-brand-soft);
  color: var(--nx-brand);
  font-size: 26px;
  font-weight: 800;
  overflow: hidden;
}
.nx-avprev__img img { width: 100%; height: 100%; object-fit: cover; }
.nx-avinput { display: none; }
.nx-avsec__info { margin-top: 12px; font-size: 13px; color: var(--nx-muted); }

/* ---------- saved articles ---------- */
.nx-saved {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.nx-savedcard {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
  color: var(--nx-ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.nx-savedcard:hover { border-color: var(--nx-brand); background: #fff; }
.nx-savedcard__media {
  width: 76px; height: 56px;
  border-radius: var(--nx-radius-sm);
  object-fit: cover;
  background: var(--nx-line);
}
.nx-savedcard__info { min-width: 0; }
.nx-savedcard__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-savedcard__date { margin-top: 4px; font-size: 12px; color: var(--nx-muted); }
.nx-savedcard__actions { flex: none; }

/* ============================================================
   STATES / FEEDBACK
   ============================================================ */
.nx-empty {
  margin: 40px auto;
  padding: 54px 24px;
  max-width: 520px;
  border: 1px dashed var(--nx-line-strong);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-surface);
  text-align: center;
}
.nx-empty__icon { font-size: 40px; line-height: 1; margin-bottom: 14px; }
.nx-empty__text { margin: 0; font-size: 15.5px; color: var(--nx-muted); }
.nx-blank {
  padding: 26px;
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
  text-align: center;
}
.nx-blank p { margin: 0; color: var(--nx-muted); }

.nx-load { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 0; }
.nx-load__spin {
  width: 26px; height: 26px;
  border: 3px solid var(--nx-line);
  border-top-color: var(--nx-brand);
  border-radius: 50%;
  animation: nx-spin .7s linear infinite;
}
.nx-load__text { font-size: 14px; color: var(--nx-muted); }
.nx-spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nx-spin .7s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }

.nx-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 900;
  max-width: min(92vw, 420px);
  padding: 13px 20px;
  border-radius: var(--nx-radius);
  background: var(--nx-dark);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--nx-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
}
.nx-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nx-toast.success { background: #15803d; }
.nx-toast.error { background: #b91c1c; }

.nx-alert {
  display: none;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--nx-radius-sm);
  border-left: 4px solid #15803d;
  background: #f0fdf4;
  color: #166534;
  font-size: 14.5px;
  font-weight: 600;
}
.nx-alert.show { display: block; }
.nx-alert.error { border-left-color: #b91c1c; background: #fef2f2; color: #991b1b; }
.nx-alert-in { animation: nx-fade .3s ease; }
@keyframes nx-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.nx-foot {
  margin-top: 56px;
  background: var(--nx-dark);
  color: #94a3b8;
}
.nx-foot__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--nx-maxw);
  margin: 0 auto;
  padding: 40px 20px 32px;
}
.nx-foot__inner strong {
  font-family: var(--nx-serif);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
}
.nx-foot__links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.nx-foot__links a { color: #cbd5e1; font-size: 14px; }
.nx-foot__links a:hover { color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  main:has(.nx-hero) { grid-template-columns: minmax(0, 1fr); }
  main:has(.nx-hero) .nx-sec--magazine,
  main:has(.nx-hero) .nx-sec--split,
  main:has(.nx-hero) .nx-sec--compact { grid-column: 1 / -1; }
  main:has(.nx-hero) .nx-sec--split .nx-cols { grid-template-columns: 1fr 1fr; }
  main:has(.nx-hero) .nx-sec--compact .nx-compact { grid-template-columns: repeat(4, 1fr); }
  main:has(.nx-hero) .nx-row { grid-template-columns: 200px minmax(0, 1fr); }

  .nx-picks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-split2 { grid-template-columns: minmax(0, 1fr); }
  .nx-side { position: static; }
  .nx-acct__wrap { grid-template-columns: 240px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .nx-nav--desk { display: none; }
  .nx-mnav { display: block; }
  .nx-masthead .nx-nav { display: none; }
  .nx-catbar { top: 60px; }
  .nx-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .nx-sec--feature .nx-sec__body { grid-template-columns: minmax(0, 1fr); }
  .nx-sec--feature .nx-feature,
  .nx-sec--feature .nx-cards,
  .nx-sec--feature .nx-card { grid-column: auto; grid-row: auto; }
  .nx-acct__wrap { grid-template-columns: minmax(0, 1fr); }
  .nx-acct__side { position: static; }
  .nx-acctnav { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .nx-wrap { padding: 0 16px; }
  main:has(.nx-hero) { padding: 16px 16px 8px; gap: 22px; }
  main:has(.nx-hero) .nx-sec--split .nx-cols { grid-template-columns: 1fr; }
  main:has(.nx-hero) .nx-sec--compact .nx-compact { grid-template-columns: repeat(2, 1fr); }

  .nx-banner { padding: 30px 0 26px; }
  .nx-banner__body p { font-size: 16px; }

  .nx-hero .nx-wrap { gap: 26px; }
  .nx-lead__img { aspect-ratio: 16 / 9; }
  .nx-picks__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .nx-lead__title { font-size: 1.8rem; }
  .nx-lead__deck { font-size: 16px; }

  .nx-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  main:has(.nx-hero) .nx-row { grid-template-columns: 130px minmax(0, 1fr); }
  .nx-row__title { font-size: 1.1rem; }
  /* cancel alternating on small screens (stack media above text) */
  .nx-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .nx-row:nth-child(even) .nx-row__media,
  .nx-row:nth-child(even) .nx-row__body { order: 0; }
  main:has(.nx-hero) .nx-row:nth-child(even) { grid-template-columns: 130px minmax(0, 1fr); }

  .nx-cols { grid-template-columns: 1fr; gap: 0; }
  .nx-feed__item { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; }
  .nx-feed__title { font-size: 1.05rem; }
  .nx-feed__summary { display: none; }

  .nx-grid { grid-template-columns: 1fr; gap: 20px; }
  .nx-related__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  .nx-body { padding: 18px; font-size: 16px; }
  .nx-head__figure img { aspect-ratio: 16 / 10; }
  .nx-stats { grid-template-columns: 1fr; }
  .nx-doc__shell { padding: 22px; }
  .nx-doc__title { font-size: 1.6rem; }
  .nx-auth__card { padding: 24px; }
  .nx-acct__content { padding: 20px; }
  .nx-saved { grid-template-columns: 1fr; }
  .nx-compact { grid-template-columns: repeat(2, 1fr); }
  .nx-crumbs__list { gap: 5px; font-size: 13px; }
}

@media (max-width: 480px) {
  .nx-mnav__brand { font-size: 17px; }
  .nx-lead__title { font-size: 1.6rem; }
  .nx-post__body { padding: 15px; }
  .nx-stat { padding: 14px; }
  .nx-toast { bottom: 20px; }
  .pagination-list { gap: 6px; }
  .pagination-link { min-width: 38px; height: 38px; padding: 0 10px; font-size: 14px; }
  .pagination-link.prev,
  .pagination-link.next { padding: 0 9px; font-size: 18px; }
}