/* ============================================================
   Front page layout — journal / newspaper structure
   Layered on top of styles.css (tokens are shared)
   ============================================================ */

.j-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- shared across pages that use this header ----------
   Only the 47px section nav stays stuck to the top; the masthead scrolls away.
   styles.css offsets the TOC / filter bar / margin notes by --header-h, so it
   has to match the new sticky chrome or content hides underneath. */
.j-page { --header-h: 47px; }

/* ---------- masthead ----------
   Logo sits flush left at the page gutter, same anchor as globalinfinity.ai:
   46px mark + 15px gap, inside an 86px band. The dateline takes the place
   that the primary nav occupies on .ai, so the two headers read as siblings
   while this one still behaves like a nameplate (rules, mono dateline). */
.j-masthead { border-bottom: 1px solid var(--ink); }
.j-masthead-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2.2vw, 30px);
  min-height: 86px;
  padding-block: 14px;
}
.j-brand {
  display: inline-flex;
  align-items: center;
  gap: 15px;
}
.j-brand img { width: 46px; height: 46px; transition: transform var(--fast) var(--ease); }
.j-brand:hover img { transform: translateY(-2px); }
.j-brand-name {
  font-family: var(--sans);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1;
  white-space: nowrap;
}
.j-brand-name span { color: var(--accent); }

.j-dateline {
  margin-right: auto;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.85;
}
.j-date-line { display: block; color: var(--text-2); }
.j-date-sep { padding: 0 6px; color: var(--text-3); }
.j-date-sub { display: block; }

.j-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}
.j-actions .icon-btn { height: 32px; padding: 0 9px; border: 0; }
.j-actions .icon-btn kbd { display: none; }
.j-actions .lang-btn { height: 32px; padding: 0 7px; border: 0; }
.j-actions-link {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
}
.j-actions-link:hover { color: var(--accent); }

/* ---------- section nav ---------- */
.j-nav {
  position: sticky;
  top: 0;
  z-index: 55;
  background: rgba(247, 243, 233, 0.95);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule-strong);
}
.j-nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  height: 46px;
  overflow-x: auto;
  scrollbar-width: none;
}
.j-nav-inner::-webkit-scrollbar { display: none; }
.j-nav a {
  position: relative;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.j-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.j-nav-end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.j-nav-end a { color: var(--text-3); }

/* ---------- lead ---------- */
.j-lead { padding-top: clamp(32px, 4vw, 56px); }
.j-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.j-kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.j-headline {
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 17ch;
  text-wrap: balance;
}
.j-dek {
  margin-top: clamp(16px, 1.8vw, 22px);
  max-width: 54ch;
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}
.j-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.j-byline .byline-person { color: var(--text); }

/* ---------- front grid: excerpt + issue index ---------- */
.j-front {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px);
  margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(26px, 3vw, 40px) 0 clamp(30px, 3.6vw, 48px);
  border-top: 3px solid var(--ink);
}
.j-front-main {
  columns: 2;
  column-gap: clamp(24px, 3vw, 40px);
  column-rule: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.72;
  color: #1c2022;
  text-wrap: pretty;
}
.j-front-main p { margin: 0 0 1em; }
.j-front-main p:first-child { margin-top: 0; }
.j-front-main p:first-child::first-letter {
  float: left;
  font-size: 3.3em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--accent);
}
.j-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  break-inside: avoid;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.j-more:hover { color: var(--accent); border-color: var(--accent); }

.j-front-side { border-left: 1px solid var(--rule); padding-left: clamp(18px, 2.4vw, 32px); }
.j-side-h {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.j-issue-list li { border-bottom: 1px solid var(--rule); }
.j-issue-list a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
}
.j-issue-list a:hover .j-issue-title { color: var(--accent); }
.j-issue-no {
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.j-issue-title {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  transition: color var(--fast) var(--ease);
}
.j-issue-title small {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.j-note {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--serif);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-2);
}
.j-note .j-note-src {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- section bands ---------- */
.j-band { border-top: 1px solid var(--rule-strong); padding: clamp(28px, 3.4vw, 44px) 0; }
.j-band-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 56px);
}
.j-band-label { display: flex; flex-direction: column; gap: 8px; }
.j-band-no {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.j-band-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.j-band-more {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.j-band-more:hover { color: var(--accent); }
.j-band-stories { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.j-story h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.24;
  letter-spacing: -0.015em;
  transition: color var(--fast) var(--ease);
  text-wrap: pretty;
}
.j-story:hover h3 { color: var(--accent); }
.j-story p {
  margin-top: 8px;
  max-width: 38ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}
.j-band-note {
  max-width: 34ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-3);
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.j-story .j-story-meta {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- archive table ---------- */
.j-archive {
  border-top: 3px solid var(--ink);
  padding-block: clamp(30px, 3.6vw, 48px) clamp(52px, 6vw, 80px);
}
.j-archive-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.j-archive-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.02em;
}
.j-archive-head a {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.j-archive-head a:hover { color: var(--accent); }
.j-table { width: 100%; border-collapse: collapse; }
.j-table th {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
}
.j-table th:last-child, .j-table td:last-child { text-align: right; padding-right: 0; }
.j-table td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-2);
}
.j-table td:first-child { width: 54px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--accent); }
.j-table td:nth-child(2) { font-family: var(--serif); font-size: 16.5px; color: var(--text); line-height: 1.3; }
.j-table td:nth-child(2) a:hover { color: var(--accent); }
.j-table tbody tr:hover td { background: rgba(122, 46, 46, 0.03); }
.j-langs { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; color: var(--text-3); white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .j-front { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .j-front-main { columns: 1; }
  .j-band-grid { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .j-masthead-inner { min-height: 72px; gap: 8px 14px; flex-wrap: nowrap; }
  .j-dateline { display: none; }
  .j-brand { margin-right: auto; }
  .j-front { grid-template-columns: 1fr; }
  .j-front-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-strong); padding-top: 22px; }
  .j-band-grid { grid-template-columns: 1fr; gap: 16px; }
  .j-band-label { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 12px; }
  .j-band-stories { grid-template-columns: 1fr; gap: 22px; }
  .j-table th:nth-child(3), .j-table td:nth-child(3),
  .j-table th:nth-child(5), .j-table td:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
  .j-actions-link { display: none; }
  .j-brand img { width: 38px; height: 38px; }
  .j-brand-name { font-size: 12px; letter-spacing: 0.14em; }
  .j-actions .icon-btn .label { display: none; }
  .j-actions .icon-btn { width: 32px; padding: 0; justify-content: center; }
  .j-actions-link { font-size: 8.5px; letter-spacing: 0.1em; }
  .j-nav a { font-size: 9.5px; letter-spacing: 0.1em; }
  .j-headline { font-size: clamp(38px, 10vw, 52px); }
  .j-front-main { font-size: 16.5px; }
  .j-table td:nth-child(4), .j-table th:nth-child(4) { display: none; }
}


/* CJK adjustments for the front page */
:lang(zh) .j-headline {
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.22;
  letter-spacing: 0.01em;
  max-width: 22em;
  font-weight: 500;
}
:lang(zh) .j-kicker { letter-spacing: 0.14em; }
:lang(zh) .j-dek { line-height: 1.8; }
:lang(zh) .j-band-name,
:lang(zh) .j-story h3,
:lang(zh) .j-issue-title,
:lang(zh) .j-archive-head h2 { letter-spacing: 0.01em; line-height: 1.45; }
:lang(zh) .j-front-main { font-size: 16.5px; line-height: 1.9; }
:lang(zh) .j-brand-name { letter-spacing: 0.2em; }
/* a CJK drop cap should be one full character, not a 3.3em Latin initial */
:lang(zh) .j-front-main p:first-child::first-letter {
  font-size: 2.5em;
  line-height: 1;
  padding: 0.08em 0.1em 0 0;
}
/* italics are a Latin convention; CJK uses weight + rule instead */
:lang(zh) .j-band-note,
:lang(zh) .j-note { font-style: normal; }
:lang(zh) .j-band-note { color: var(--text-3); }
:lang(zh) .j-story p,
:lang(zh) .j-band-note { line-height: 1.85; }
:lang(zh) .j-dek { font-size: clamp(17px, 1.6vw, 20px); }