/* jp-next: JournalsPub's own look, loaded after site.css when JPNEXT is on.
   Taken from the live journalspub.com (read 28 Oct 2026), not invented:
     ink #0c0d0e (hero, buttons, logo block)   grey #a8a8a8 (logo's second block)
     ground #f4f4f4   body text #1f2937   headings in a serif, navigation in a sans
   The brand is monochrome. The only blue on the live site is the cookie banner, so
   there is none here: links are ink and carry an underline so they stay links. */
:root {
  --ink: #1f2937;
  --muted: #4b5563;
  --faint: #5b616b;
  --bg: #ffffff;
  --bg-alt: #f4f4f4;
  --bg-sink: #eceded;
  --rule: #e5e5e5;
  --rule-strong: #cfcfcf;
  --slate-deep: #0c0d0e;
  --on-slate: #e7e8ea;
  --on-slate-faint: #b6babd;

  --brand: #0c0d0e;
  --brand-deep: #000000;
  --brand-tint: #eceded;
  --link: #0c0d0e;
  --link-hover: #4b5563;
  --accent: #5b616b;          /* 6.1:1 on white: can set type */
  --accent-bright: #a8a8a8;   /* the logo's grey: rules, borders, hover only */
  --accent-tint: #f1f1f2;
  --metric-bg: #eceded;
  --info: #0c0d0e;
  --info-deep: #000000;
  --shadow-lift: 0 4px 20px rgba(12, 13, 14, .10);
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: #0c0d0e; }
main a:not(.button):not(.cta), .page-body a, .prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--accent-bright); }
main a:not(.button):not(.cta):hover { text-decoration-color: currentColor; }
/* The mark already says "JournalsPub": the text name beside it would say it twice. */
.brand .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand img.logo { height: 44px; width: auto; display: block; }
@media (max-width: 640px) { .brand img.logo { height: 36px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7e8ea; --muted: #b6babd; --faint: #9aa0a6;
    --bg: #17181a; --bg-alt: #0c0d0e; --bg-sink: #202225;
    --rule: #2a2c30; --rule-strong: #3a3d42;
    --slate-deep: #17181a; --on-slate: #dcdde0; --on-slate-faint: #a3a7ad;
    --brand: #e7e8ea; --brand-deep: #ffffff; --brand-tint: #202225;
    --link: #e7e8ea; --link-hover: #b6babd;
    --accent: #c4c7cb; --accent-bright: #6e747b; --accent-tint: #202225;
    --metric-bg: #202225; --info: #e7e8ea; --info-deep: #ffffff;
  }
  h1, h2, h3, h4 { color: #f4f4f4; }
  .brand img.logo { filter: invert(1) hue-rotate(180deg); }
}

/* Buttons: the live site's pair is solid black (primary) and white-on-black outline. */
.button.cta, a.nav-cta.hot, .site-nav a.nav-cta.hot, .button.hot { background: #0c0d0e; color: #fff; border-color: #0c0d0e; }
.button.cta:hover, a.nav-cta.hot:hover, .site-nav a.nav-cta.hot:hover, .button.hot:hover { background: #000; color: #fff; }
.site-nav a.nav-cta:not(.hot) { background: #fff; color: #0c0d0e; border: 1px solid #0c0d0e; }
.site-nav a.nav-cta:not(.hot):hover { background: #0c0d0e; color: #fff; }
.jp-affiliations { font-size: var(--t-sm); line-height: 1.5; color: var(--muted); margin: var(--s-3) 0 var(--s-4); max-width: var(--measure); }
.journal-cover img, .cover img { object-fit: cover; }

/* Home hero: after the live site's own -- a black panel on the left, copy on the right, a stat bar
   across the join. The panel carries the journals' real covers instead of the live site's drawn
   phone-and-tablet mock-up. */
.jp-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 calc(50% - 50vw); background: var(--bg-alt); }
.jp-hero-art { background: #0c0d0e; min-height: 560px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.jp-hero-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.07), transparent 60%); pointer-events: none; }
.jp-covers { display: grid; grid-template-columns: repeat(3, 150px); gap: 22px; transform: rotate(-6deg) scale(1.05); }
.jp-cover { display: block; border-radius: 4px; box-shadow: 0 14px 34px rgba(0,0,0,.55); background: #1f2937; line-height: 0; transition: transform .25s ease; }
.jp-cover:nth-child(3n+2) { transform: translateY(34px); }
.jp-cover:nth-child(3n) { transform: translateY(-18px); }
.jp-cover:hover { transform: translateY(-6px) scale(1.03); }
.jp-cover img { width: 150px; height: 195px; object-fit: cover; border-radius: 4px; display: block; }
.jp-hero-copy { padding: 72px 64px 120px; max-width: 40rem; align-self: center; }
.jp-badge { display: inline-block; background: #0c0d0e; color: #fff; font: 700 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: .55rem .7rem; border-radius: 4px; }
.jp-hero-copy h1 { font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.1; margin: var(--s-4) 0 var(--s-4); }
.jp-lead { font-size: var(--t-md); color: var(--muted); margin: 0 0 var(--s-4); }
.jp-points { list-style: none; margin: 0 0 var(--s-5); padding: 0; font-family: var(--serif); }
.jp-points li { position: relative; padding-left: 2.1rem; margin: .55rem 0; }
.jp-points li::before { content: "✓"; position: absolute; left: 0; top: .05rem; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; background: var(--bg-sink); border-radius: 4px; font: 700 .8rem var(--sans); }
.jp-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-5); }
.jp-actions .button { padding: .8rem 1.3rem; font-weight: 700; }
.jp-search { display: flex; gap: var(--s-2); }
.jp-search input { flex: 1; min-width: 0; padding: .8rem 1rem; border: 1px solid var(--rule-strong); border-radius: 8px; background: #fff; font: inherit; }
.jp-search button { background: #0c0d0e; color: #fff; border: 0; border-radius: 8px; padding: 0 1.4rem; font-weight: 700; cursor: pointer; }
.jp-stats { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); width: min(1080px, calc(100% - 2rem)); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(12,13,14,.16); overflow: hidden; }
.jp-stats li { text-align: center; padding: 1.5rem .5rem; border-left: 1px solid var(--rule); }
.jp-stats li:first-child { border-left: 0; }
.jp-stats a { text-decoration: none !important; display: block; color: inherit; }
.jp-stats .n { display: block; font: 700 1.9rem/1.1 var(--serif); color: #0c0d0e; }
.jp-stats .label { display: block; margin-top: .25rem; font-size: var(--t-xs); color: var(--faint); }
.jp-hero + * { margin-top: 84px; }
@media (max-width: 900px) {
  .jp-hero { grid-template-columns: 1fr; }
  .jp-hero-art { min-height: 320px; }
  .jp-covers { grid-template-columns: repeat(3, 104px); gap: 14px; transform: rotate(-6deg) scale(1); }
  .jp-cover img { width: 104px; height: 135px; }
  .jp-hero-copy { padding: 40px 20px 150px; }
  .jp-stats { grid-template-columns: repeat(2, 1fr); bottom: -96px; }
  .jp-stats li:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }
  .jp-stats li:nth-child(4) { border-top: 1px solid var(--rule); }
  .jp-hero + * { margin-top: 120px; }
}

/* The engine draws <main> as a white card on a grey page; the hero is full-bleed, so on the home page the card steps aside. */
main:has(> .jp-hero), main:has(.jp-hero) { background: transparent; box-shadow: none; border: 0; border-radius: 0; padding-top: 0; margin-top: 0; }
.jp-covers { transform: rotate(-6deg) scale(.98); }
.jp-hero-art { min-height: 600px; }

/* 28 Oct 2026, Boss: "ye toh black and white lag raha hai". Colour from the journals' own covers:
   their header band is a deep navy (sampled: #203060 / #102080 across the 104 covers) with the
   title set in gold. Navy carries meaning (buttons, links, figures); gold is decoration only
   (rules, ticks, hover) because it cannot set type on white. The logo stays black and grey. */
:root {
  --brand: #1b2d6b;          /* 11.9:1 on white */
  --brand-deep: #121f4d;
  --brand-tint: #eef1fa;
  --link: #1b2d6b;
  --link-hover: #121f4d;
  --accent: #8a5a00;         /* dark gold, 6.4:1: may set type */
  --accent-bright: #e2a400;  /* the covers' gold: rules, ticks, hover */
  --accent-tint: #fdf6e3;
  --metric-bg: #eef1fa;
  --info: #1b2d6b;
  --info-deep: #121f4d;
  --slate-deep: #121f4d;
  --on-slate: #e6e9f4;
  --on-slate-faint: #b8c0dc;
}
h1, h2, h3, h4 { color: #121f4d; }
main a:not(.button):not(.cta), .page-body a, .prose a { text-decoration-color: var(--accent-bright); }
.button.cta, a.nav-cta.hot, .site-nav a.nav-cta.hot, .button.hot { background: #1b2d6b; border-color: #1b2d6b; }
.button.cta:hover, a.nav-cta.hot:hover, .site-nav a.nav-cta.hot:hover, .button.hot:hover { background: #121f4d; }
.site-nav a.nav-cta:not(.hot) { color: #1b2d6b; border-color: #1b2d6b; }
.site-nav a.nav-cta:not(.hot):hover { background: #1b2d6b; color: #fff; }
.jp-hero-art { background: radial-gradient(ellipse at 30% 20%, #24397f 0%, #16245a 45%, #0d1636 100%); }
.jp-badge { background: #1b2d6b; }
.jp-badge::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent-bright); margin-right: .5rem; vertical-align: .05rem; }
.jp-points li::before { background: var(--accent-tint); color: var(--accent); border: 1px solid #f1d58a; }
.jp-search button { background: #1b2d6b; }
.jp-stats { border-top: 3px solid var(--accent-bright); }
.jp-stats .n { color: #1b2d6b; }
@media (prefers-color-scheme: dark) {
  :root { --brand: #9fb2ef; --link: #b9c7f4; --link-hover: #dbe3fb; --accent-bright: #f0be3a; --slate-deep: #0d1636; }
  h1, h2, h3, h4 { color: #eef1fa; }
}

/* Discontinued titles: the archive stays, the ways to buy or submit go. */
.closed-note{margin:.75rem 0 1rem;padding:.7rem .95rem;border-left:4px solid var(--gold,#c8962c);background:#fbf6e8;border-radius:6px;color:#3a3220;font-size:.97rem}
.closed-note a{font-weight:600}
.badge-closed{background:#eceef3;color:#4a5170;font-weight:600}