/* =====================================================================
   NEXUS — JOURNAL (BLOGS) REDESIGN (page layer)
   Requires: homepage-redesign.css, homepage-refresh.css, nexus-inner.css
   Broadsheet palette: crisp white, ink rules, brand blue. Namespaced .nxj-*.
   ===================================================================== */

.nxj-page { --nxj-ink: #0d1520; --nxj-rule: #0d1520; --nxj-soft: #e7ebef; }

.nxj-rule { display: block; height: 1px; background: var(--nxj-rule); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--nxa-ease) .5s; }
.nxj-rule-thick { height: 4px; }
.nxj-rule-double { height: 6px; background: transparent; border-top: 1px solid var(--nxj-rule); border-bottom: 1px solid var(--nxj-rule); transition-delay: .9s; }
.nxa-ready .nxj-rule { transform: scaleX(1); }
.nxj-more .nxj-rule { transform: scaleX(1); }
.nxj-kicker { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--nxa-blue); }
.nxj-h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; color: var(--nxj-ink); line-height: 1.1; }
.nxj-h2 em { font-family: var(--nx-font-serif); font-style: italic; font-weight: 600; color: var(--nxa-blue); }

/* ---------------------------------------------------------------------
   1. MASTHEAD
   --------------------------------------------------------------------- */
.nxj-mast { padding: clamp(110px, 10vw, 140px) 0 0; background: #fff; }
.nxj-mast-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; font-family: var(--nx-font-serif); font-style: italic; font-size: 1.05rem; color: #5b6b7d; }
.nxj-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; font-family: var(--nx-font-sans); font-style: normal; font-size: 13px; font-weight: 600; color: #7d8ea0; }
.nxj-crumbs li + li::before { content: "/"; margin-right: 10px; color: #b5c4d1; }
.nxj-crumbs a { color: var(--nxa-blue); }
.nxj-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(4px, .65vw, 10px);
  margin: clamp(10px, 2vw, 24px) 0 clamp(6px, 1.4vw, 16px);
  line-height: .95;
  color: var(--nxj-ink);
  white-space: nowrap;
}
.nxj-the { font-family: var(--nx-font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 4vw, 3.6rem); color: var(--nxa-blue); opacity: 0; transform: translateY(20px); transition: opacity .8s ease .4s, transform 1s var(--nxa-ease) .4s; }
.nxj-page .nxj-the { font-size: clamp(1.45rem, 2.7vw, 2.6rem) !important; }
.nxa-ready .nxj-the { opacity: 1; transform: none; }
.nxj-letters { font-family: var(--nx-font-sans); font-weight: 800; letter-spacing: -.055em; font-size: clamp(2.4rem, 5.5vw, 5.4rem); }
.nxj-page .nxj-letters { font-size: clamp(1.7rem, 3.4vw, 3.4rem) !important; }
.nxj-page .nxj-letters .nxj-ch { font-size: inherit !important; }
.nxj-letters .nxj-ch { display: inline-block; opacity: 0; transform: translateY(60%) rotate(6deg); transition: opacity .6s ease, transform .9s var(--nxa-ease); }
.nxa-ready .nxj-letters .nxj-ch { opacity: 1; transform: none; }
.nxj-mast-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 0; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: #3f4a57; }
.nxj-mast-count { font-family: var(--nx-font-serif); font-style: italic; font-size: 1.1rem; font-weight: 500; color: #5b6b7d; }
.nxj-mast-count b { font-family: var(--nx-font-sans); font-style: normal; font-weight: 800; color: var(--nxj-ink); }

/* ---------------------------------------------------------------------
   2. LEAD STORY
   --------------------------------------------------------------------- */
.nxj-lead { padding: clamp(40px, 5vw, 64px) 0 clamp(60px, 7vw, 90px); background: #fff; }
.nxj-lead-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 60px); align-items: end; color: var(--nxj-ink); }
.nxj-lead-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #0d1520; }
.nxj-lead-media.nxa-load { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--nxa-ease) 1.2s; }
.nxa-ready .nxj-lead-media.nxa-load { clip-path: inset(0 0 0 0); }
.nxj-lead-media img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--nxa-ease); will-change: translate; }
.nxj-lead-card:hover .nxj-lead-media img { transform: scale(1.1); }
.nxj-lead-stamp { position: absolute; left: 20px; top: 20px; padding: 7px 12px; background: #fff; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--nxj-ink); }
.nxj-lead-copy { display: flex; flex-direction: column; padding-bottom: 6px; }
.nxj-lead-title { display: block; margin: 16px 0 18px; font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.nxj-lead-title em { font-family: var(--nx-font-serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; color: var(--nxa-blue); }
.nxj-lead-dek { font-size: 16.5px; line-height: 1.75; color: #4c5563; }
.nxj-lead-go { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--nxj-soft); font-size: 15px; font-weight: 800; color: var(--nxj-ink); transition: gap .35s var(--nxa-ease), color .3s; }
.nxj-lead-card:hover .nxj-lead-go { gap: 18px; color: var(--nxa-blue); }

/* ---------------------------------------------------------------------
   3. INDEX
   --------------------------------------------------------------------- */
.nxj-index { position: relative; background: #f6f8fa; border-top: 1px solid var(--nxj-soft); }
.nxj-index-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.nxj-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid #d6dee6; border-radius: 999px; background: #fff; }
.nxj-tabs button { padding: 9px 16px; border: 0; border-radius: 999px; background: none; font-size: 13.5px; font-weight: 700; color: #4d6074; cursor: pointer; transition: background .3s, color .3s; }
.nxj-tabs button:hover { color: var(--nxj-ink); }
.nxj-tabs button.is-on { background: var(--nxj-ink); color: #fff; }
.nxj-tabs button:focus-visible { outline: 3px solid #62b6e4; outline-offset: 2px; }

.nxj-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--nxj-ink); }
.nxj-row { border-bottom: 1px solid #d6dee6; transition: opacity .4s ease; }
.nxj-row.is-hidden { display: none; }
.nxj-row a {
  position: relative;
  display: grid;
  grid-template-columns: 56px 200px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 20px;
  padding: clamp(24px, 3vw, 34px) 10px;
  color: var(--nxj-ink);
  transition: padding .5s var(--nxa-ease), background .4s;
}
.nxj-row a:hover, .nxj-row a:focus-visible { padding-left: 24px; background: #fff; }
.nxj-row-num { font-family: var(--nx-font-serif); font-style: italic; font-size: 1.6rem; font-weight: 600; color: #9fb0c0; transition: color .3s; }
.nxj-row a:hover .nxj-row-num { color: var(--nxa-blue); }
.nxj-row-cat { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--nxa-blue); }
.nxj-row-main strong { display: block; font-size: clamp(1.15rem, 1.7vw, 1.55rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.nxj-row-main > span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: #5b6b7d; }
.nxj-row-time { font-size: 13px; font-weight: 700; color: #7d8ea0; text-align: right; }
.nxj-row-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #cdd8e1; transition: background .3s, border-color .3s, color .3s, transform .5s var(--nxa-ease); }
.nxj-row a:hover .nxj-row-arrow { background: var(--nxj-ink); border-color: var(--nxj-ink); color: #fff; transform: rotate(-45deg); }

.nxj-preview {
  position: fixed; left: 0; top: 0;
  z-index: 60;
  width: 300px; height: 200px;
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8) rotate(-4deg);
  transition: opacity .3s ease, transform .5s var(--nxa-ease);
  box-shadow: 0 30px 60px rgba(13,21,32,.3);
}
.nxj-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
.nxj-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   4. EDITOR'S NOTE
   --------------------------------------------------------------------- */
.nxj-note-sec { background: #fff; }
.nxj-note-grid { display: grid; grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); }
.nxj-note-head .nxj-kicker { margin-bottom: 12px; }
.nxj-columns { columns: 2; column-gap: 44px; column-rule: 1px solid var(--nxj-soft); }
.nxj-columns p { margin: 0 0 18px; font-family: var(--nx-font-serif); font-size: 1.25rem !important; line-height: 1.6 !important; color: #2f3a46 !important; break-inside: avoid-column; }
.nxj-drop { float: left; margin: 6px 10px 0 0; font-family: var(--nx-font-sans); font-size: 4.2rem; font-weight: 800; line-height: .78; color: var(--nxa-blue); }
.nxj-sign { display: block; padding-top: 10px; border-top: 1px solid var(--nxj-soft); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #7d8ea0; }

/* ---------------------------------------------------------------------
   5. CONTINUE READING
   --------------------------------------------------------------------- */
.nxj-more { padding: 0 0 clamp(80px, 9vw, 120px); background: #fff; }
.nxj-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nxj-more-item {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 34px 28px 70px;
  color: var(--nxj-ink);
  transition: background .4s;
}
.nxj-more-item + .nxj-more-item { border-left: 1px solid var(--nxj-soft); }
.nxj-more-item strong { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; }
.nxj-more-item > span:not(.nxj-kicker) { font-size: 14.5px; line-height: 1.65; color: #5b6b7d; }
.nxj-more-item i { position: absolute; left: 28px; bottom: 28px; transition: transform .5s var(--nxa-ease); }
.nxj-more-item:hover { background: #f6f8fa; }
.nxj-more-item:hover i { transform: translateX(10px); }
.nxj-more-dark { background: var(--nxj-ink); color: #fff; }
.nxj-more-dark:hover { background: #17283b; }
.nxj-more-dark .nxj-kicker { color: var(--nxa-sky); }
.nxj-more-dark > span:not(.nxj-kicker) { color: #a9b9c9; }
.nxj-disclaimer { max-width: 860px; margin: 40px auto 0 !important; font-size: 12px !important; line-height: 1.7 !important; color: #8a99a9 !important; text-align: center !important; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .nxj-row a { grid-template-columns: 46px 150px minmax(0, 1fr) 46px; }
  .nxj-row-time { display: none; }
}
@media (max-width: 991px) {
  .nxj-lead-card, .nxj-note-grid { grid-template-columns: 1fr; }
  .nxj-row a { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 14px; }
  .nxj-row-cat { grid-column: 2; grid-row: 1; }
  .nxj-row-main { grid-column: 2; grid-row: 2; }
  .nxj-row-num { grid-row: 1 / 3; }
  .nxj-row-arrow { grid-column: 3; grid-row: 1 / 3; }
  .nxj-more-grid { grid-template-columns: 1fr; }
  .nxj-more-item + .nxj-more-item { border-left: 0; border-top: 1px solid var(--nxj-soft); }
  .nxj-preview { display: none; }
}
@media (max-width: 767px) {
  .nxj-wordmark { flex-direction: column; align-items: center; gap: 0; }
  .nxj-page .nxj-the { font-size: clamp(1.35rem, 6vw, 2rem) !important; }
  .nxj-page .nxj-letters { font-size: clamp(1.55rem, 7vw, 2.35rem) !important; }
  .nxj-columns { columns: 1; }
  .nxj-mast-bar { font-size: 12.5px; }
  .nxj-row-arrow { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .nxj-rule, .nxj-letters .nxj-ch, .nxj-the { transform: none !important; opacity: 1 !important; }
  .nxj-lead-media.nxa-load { clip-path: none !important; }
}

/* Oct 2026: no floating image preview when hovering a blog in the list */
.nxj-preview { display: none !important; }

/* Oct 2026: blogs shown side by side as cards, each with its image above the title */
.nxj-list.nxj-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); border-top: 0; }
.nxj-cards .nxj-card { border-bottom: 0; }
.nxj-cards .nxj-card a {
  display: flex; flex-direction: column; height: 100%; padding: 0; gap: 0;
  background: #fff; border: 1px solid #dfe7ee; border-radius: 18px; overflow: hidden;
  transition: transform .5s var(--nxa-ease), box-shadow .4s, border-color .4s;
}
.nxj-cards .nxj-card a:hover, .nxj-cards .nxj-card a:focus-visible {
  padding-left: 0; transform: translateY(-4px); border-color: #c9d8e4;
  box-shadow: 0 18px 40px rgba(10,19,34,.10);
}
.nxj-card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #e8eef3; }
.nxj-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--nxa-ease); }
.nxj-card a:hover .nxj-card-media img { transform: scale(1.04); }
.nxj-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.nxj-cards .nxj-row-num { font-size: 1.25rem; line-height: 1; margin-bottom: 10px; }
.nxj-card-title { display: block; font-size: clamp(1.1rem, 1.35vw, 1.3rem); font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--nxj-ink); }
.nxj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; font-size: 14.5px; color: #5b6b7d; }
.nxj-cards .nxj-row-arrow { width: 42px; height: 42px; flex: none; }
@media (max-width: 991px) {
  .nxj-list.nxj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nxj-cards .nxj-card a { display: flex; }
}
@media (max-width: 767px) {
  .nxj-list.nxj-cards { grid-template-columns: 1fr; }
}