/*
 * 24 Life Sciences — Clinical Research Insights
 * Namespaced deliberately to avoid existing site stylesheet conflicts.
 * Load AFTER headfootnew.css / responsivenew.css / stylenew.css.
 */
#lsJournal {
  --j-ink: #19343e;
  --j-ink-strong: #102a34;
  --j-muted: #62737b;
  --j-teal: #087d75;
  --j-teal-dark: #08665f;
  --j-border: #dce6e4;
  --j-panel: #f3f7f5;
  --j-surface: #fff;
  background: var(--j-surface);
  color: var(--j-ink);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
#lsJournal *, #lsJournal *::before, #lsJournal *::after { box-sizing: border-box; }
#lsJournal h1, #lsJournal h2, #lsJournal h3, #lsJournal p, #lsJournal ul { margin: 0; padding: 0; }
#lsJournal a { text-decoration: none; }
#lsJournal button, #lsJournal input { font: inherit; }
#lsJournal button { cursor: pointer; }
#lsJournal a:focus-visible, #lsJournal button:focus-visible, #lsJournal input:focus-visible { outline: 3px solid #20aaa0; outline-offset: 4px; }
#lsJournal .j-container { width: min(100% - 64px, 1200px); margin: 0 auto; }
.j-skip { position: absolute; z-index: 10000; left: 16px; top: -100px; background: #fff; border: 2px solid #087d75; border-radius: 6px; padding: 10px 14px; color: #102a34; }
.j-skip:focus { top: 14px; }

/* Quiet masthead: shorter, brighter, and clearly editorial. */
#lsJournal .j-hero { background: #f3f7f6; border-bottom: 1px solid var(--j-border); position: relative; overflow: hidden; }
#lsJournal .j-hero::before { content: ''; position: absolute; inset: 0 0 auto auto; width: 32%; height: 100%; background: linear-gradient(135deg, transparent, rgba(218,234,230,.6)); pointer-events: none; }
#lsJournal .j-hero__inner { padding: 35px 0 63px; position: relative; }
#lsJournal .j-breadcrumbs { display: flex; align-items: center; gap: 10px; font: 600 12px/1.3 'DM Sans', sans-serif; color: #647a7e; }
#lsJournal .j-breadcrumbs a { color: #61787c; }
#lsJournal .j-breadcrumbs a:hover { color: var(--j-teal); }
#lsJournal .j-breadcrumbs svg { width: 13px; height: 13px; stroke: #90a2a5; stroke-width: 1.7; fill: none; }
#lsJournal .j-breadcrumbs [aria-current] { color: #087d75; }
#lsJournal .j-hero__layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(255px, .65fr); align-items: end; gap: 80px; margin-top: 61px; }
#lsJournal .j-kicker { display: inline-flex; align-items: center; gap: 11px; color: var(--j-teal); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; margin-bottom: 18px; }
#lsJournal .j-kicker::before { content: ''; display: block; width: 27px; height: 2px; background: #0f948a; }
#lsJournal .j-hero__title { color: var(--j-ink-strong) !important; font: 500 clamp(46px, 5.1vw, 72px)/1.055 'Newsreader', Georgia, serif !important; letter-spacing: -.043em; max-width: 850px; }
#lsJournal .j-hero__title em { color: var(--j-teal); font-style: italic; }
#lsJournal .j-hero__side { border-left: 1px solid #bfd2ce; padding: 7px 0 6px 28px; margin-bottom: 8px; }
#lsJournal .j-hero__side-label { display: block; color: #087d75; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 12px; }
#lsJournal .j-hero__side p { font: 400 15px/1.82 'DM Sans',sans-serif; color: #4c656b; max-width: 295px; }
#lsJournal .j-hero__side-foot { display: inline-block; margin-top: 18px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #517777; }

/* The list heading reads like a publication index rather than a landing page. */
#lsJournal .j-content { padding: 67px 0 102px; background: white; }
#lsJournal .j-intro { display: flex; justify-content: space-between; align-items: end; gap: 26px; margin-bottom: 34px; }
#lsJournal .j-intro__eyebrow { display: block; margin-bottom: 7px; font-size: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: .15em; color: #087d75; }
#lsJournal .j-intro__title { font: 500 clamp(32px, 3vw, 43px)/1.16 'Newsreader', Georgia, serif !important; letter-spacing: -.025em; color: #132e38 !important; }
#lsJournal .j-intro__summary { color: #667a80; font-size: 13px; margin-top: 9px; }
#lsJournal .j-search { width: min(100%, 320px); flex: 0 0 320px; }
#lsJournal .j-search label { display: block; color: #36515a; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
#lsJournal .j-search__field { position: relative; }
#lsJournal .j-search__field svg { position: absolute; width: 18px; height: 18px; top: 50%; left: 15px; transform: translateY(-50%); pointer-events: none; stroke: #799094; stroke-width: 1.9; fill: none; }
#lsJournal .j-search input { height: 46px; width: 100%; padding: 0 14px 0 43px; color: #19343e; background: #fff; border: 1px solid #cfdcda; border-radius: 7px; font-size: 13px; outline: none; box-shadow: none; }
#lsJournal .j-search input:focus { border-color: #087d75; box-shadow: 0 0 0 3px rgba(8,125,117,.12); }
#lsJournal .j-search small { display: block; font-size: 10px; color: #8c9a9c; padding-top: 6px; }
#lsJournal .j-rule { height: 1px; width: 100%; background: var(--j-border); margin-bottom: 26px; }
#lsJournal .j-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 23px; }
#lsJournal .j-toolbar__label { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #4a696b; }
#lsJournal .j-toolbar__count { color: #7f8e93; font-size: 12px; }

/* First story is a genuinely featured row, not a cramped two-column tile. */
#lsJournal .j-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 27px; }
#lsJournal .j-card { min-width: 0; display: flex; flex-direction: column; background: #fff; }
#lsJournal .j-card__media { display: block; position: relative; width: 100%; overflow: hidden; aspect-ratio: 1.7; background: #dbe8e6; border-radius: 9px; }
#lsJournal .j-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
#lsJournal .j-card:hover .j-card__media img { transform: scale(1.045); }
#lsJournal .j-card__image-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg,#e1efea,#bedbd3); color: #277d75; }
#lsJournal .j-card__image-fallback svg { width: 52px; height: 52px; stroke: currentColor; stroke-width: 1.2; fill: none; }
#lsJournal .j-card__body { min-height: 0; flex: 1; padding: 19px 1px 12px; display: flex; flex-direction: column; }
#lsJournal .j-card__category { display: inline-block; width: fit-content; font: 800 10px/1.3 'DM Sans',sans-serif; color: var(--j-teal); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 11px; }
#lsJournal .j-card__title { font: 500 22px/1.28 'Newsreader', Georgia,serif !important; letter-spacing: -.018em; color: #17323d !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#lsJournal .j-card__title a { color: inherit !important; }
#lsJournal .j-card__title a:hover { color: var(--j-teal) !important; }
#lsJournal .j-card__excerpt { display: none; }
#lsJournal .j-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 11px/1.5 'DM Sans',sans-serif; color: #788a90; margin-top: auto; padding-top: 20px; }
#lsJournal .j-card__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #9aaeb2; }
#lsJournal .j-card__bottom { margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--j-border); }
#lsJournal .j-card__read { display: inline-flex; align-items: center; gap: 9px; width: fit-content; font-size: 12px; font-weight: 800; color: var(--j-teal); }
#lsJournal .j-card__read:hover { color: var(--j-teal-dark); }
#lsJournal .j-card__read svg { height: 16px; width: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; transition: transform .2s; }
#lsJournal .j-card:hover .j-card__read svg { transform: translateX(3px); }

#lsJournal .j-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0,.95fr); background: #f3f7f5; overflow: hidden; border: 1px solid #e2ebe7; border-radius: 12px; min-height: 377px; }
#lsJournal .j-card--featured .j-card__media { aspect-ratio: auto; height: 100%; border-radius: 0; }
#lsJournal .j-card--featured .j-card__body { padding: 38px 45px 36px; justify-content: center; }
#lsJournal .j-card--featured .j-card__category { margin-bottom: 18px; }
#lsJournal .j-card--featured .j-card__title { font: 500 clamp(28px,3vw,39px)/1.14 'Newsreader',Georgia,serif !important; -webkit-line-clamp: 4; }
#lsJournal .j-card--featured .j-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 14px; color: #60757b; font-size: 13px; line-height: 1.75; }
#lsJournal .j-card--featured .j-card__meta { padding-top: 18px; margin-top: 14px; }
#lsJournal .j-card--featured .j-card__bottom { border-top: 0; margin-top: 13px; padding-top: 0; }
#lsJournal .j-grid__subhead { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0 0; border-top: 1px solid var(--j-border); margin-top: 7px; margin-bottom: -12px; }
#lsJournal .j-grid__subhead h3 { color: #1b3a42 !important; font: 700 15px/1.4 'DM Sans',sans-serif !important; letter-spacing: -.01em; }
#lsJournal .j-grid__subhead span { color: #829397; font-size: 11px; }

/* Empty state, stable skeletons, and pagination. */
#lsJournal .j-notice { grid-column: 1 / -1; padding: 52px 24px; border: 1px solid var(--j-border); border-radius: 10px; background: #f7faf9; text-align: center; }
#lsJournal .j-notice__title { font: 500 28px/1.2 'Newsreader',Georgia,serif !important; color: #17323d !important; margin-bottom: 12px; }
#lsJournal .j-notice__text { font-size: 13px; color: #647a7f; }
#lsJournal .j-notice__retry { color: white; background: #087d75; border: none; border-radius: 6px; padding: 9px 18px; margin-top: 20px; font-weight: 800; font-size: 12px; }
#lsJournal .j-skeleton { overflow: hidden; min-height: 335px; }
#lsJournal .j-skeleton__image { border-radius: 9px; height: 215px; }
#lsJournal .j-skeleton__body { padding-top: 18px; }
#lsJournal .j-skeleton__line { height: 13px; border-radius: 5px; margin-bottom: 13px; }
#lsJournal .j-skeleton__line--wide { width: 92%; }
#lsJournal .j-skeleton__line--medium { width: 67%; }
#lsJournal .j-skeleton__line--small { width: 29%; }
#lsJournal .j-skeleton__image, #lsJournal .j-skeleton__line { background: linear-gradient(100deg,#e9efec 20%,#f7faf8 41%,#e9efec 62%); background-size: 210% 100%; animation: j-pulse 1.35s linear infinite; }
#lsJournal .j-skeleton--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr .95fr; background: #f5f8f7; border-radius: 12px; min-height: 377px; }
#lsJournal .j-skeleton--featured .j-skeleton__image { height: 100%; border-radius: 0; }
#lsJournal .j-skeleton--featured .j-skeleton__body { padding: 58px 40px; }
@keyframes j-pulse { to { background-position-x: -210%; } }
#lsJournal .j-pagination { margin-top: 66px; }
#lsJournal .j-page-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
#lsJournal .j-page-list__button { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 13px; font-size: 12px; font-weight: 800; color: #4c666d; background: white; border: 1px solid #dce6e4; border-radius: 7px; }
#lsJournal .j-page-list__button:not(:disabled):hover { background: #e8f4f0; color: #087d75; border-color: #9fcbc2; }
#lsJournal .j-page-list__button[aria-current] { background: #173e48; border-color: #173e48; color: white; }
#lsJournal .j-page-list__button:disabled:not([aria-current]) { opacity: .36; cursor: not-allowed; }
#lsJournal .j-page-list__ellipsis { padding: 0 4px; color: #8b9d9f; }

@media (max-width: 1050px) {
  #lsJournal .j-hero__layout { gap: 40px; }
  #lsJournal .j-card--featured .j-card__body { padding: 30px; }
  #lsJournal .j-card__title { font-size: 20px !important; }
}
@media (max-width: 800px) {
  #lsJournal .j-container { width: min(100% - 44px, 1200px); }
  #lsJournal .j-hero__layout { grid-template-columns: 1fr; gap: 24px; margin-top: 45px; }
  #lsJournal .j-hero__side { padding: 0; border-left: none; max-width: 560px; margin-top: 0; }
  #lsJournal .j-hero__side-label, #lsJournal .j-hero__side-foot { display: none; }
  #lsJournal .j-hero__inner { padding-bottom: 50px; }
  #lsJournal .j-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 20px; }
  #lsJournal .j-card--featured { grid-column: 1 / -1; }
  #lsJournal .j-skeleton--featured { grid-column: 1 / -1; }
  #lsJournal .j-card--featured .j-card__title { font-size: 30px !important; }
}
@media (max-width: 650px) {
  #lsJournal .j-container { width: min(100% - 34px, 1200px); }
  #lsJournal .j-hero__inner { padding: 22px 0 38px; }
  #lsJournal .j-hero__layout { margin-top: 40px; gap: 17px; }
  #lsJournal .j-kicker { font-size: 10px; margin-bottom: 16px; }
  #lsJournal .j-hero__title { font-size: clamp(42px,11.2vw,58px) !important; }
  #lsJournal .j-hero__side p { font-size: 13px; }
  #lsJournal .j-content { padding: 45px 0 75px; }
  #lsJournal .j-intro { display: block; }
  #lsJournal .j-intro__title { font-size: 36px !important; }
  #lsJournal .j-search { margin-top: 23px; width: 100%; }
  #lsJournal .j-grid { grid-template-columns: 1fr; gap: 31px; }
  #lsJournal .j-card--featured { grid-column: auto; display: flex; min-height: 0; }
  #lsJournal .j-card--featured .j-card__media { aspect-ratio: 1.7; height: auto; }
  #lsJournal .j-card--featured .j-card__body { padding: 25px 21px 27px; }
  #lsJournal .j-card--featured .j-card__title { font-size: 29px !important; }
  #lsJournal .j-card--featured .j-card__excerpt { -webkit-line-clamp: 2; }
  #lsJournal .j-card:not(.j-card--featured) { padding-bottom: 19px; border-bottom: 1px solid var(--j-border); }
  #lsJournal .j-card__title { font-size: 24px !important; }
  #lsJournal .j-card__body { padding: 18px 0 0; }
  #lsJournal .j-grid__subhead { margin: 0 0 -8px; padding-top: 21px; }
  #lsJournal .j-skeleton--featured { grid-column: auto; display: block; min-height: 0; }
  #lsJournal .j-skeleton--featured .j-skeleton__image { height: 220px; }
  #lsJournal .j-skeleton--featured .j-skeleton__body { padding: 24px; }
  #lsJournal .j-pagination { margin-top: 46px; }
  #lsJournal .j-page-list { gap: 5px; }
  #lsJournal .j-page-list__button { min-width: 37px; height: 39px; padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #lsJournal *, #lsJournal *::before, #lsJournal *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Additions for database-backed listing, without changing the supplied design. */
#lsJournal .j-card__media img { position:relative; z-index:1; }
#lsJournal .j-card__image-fallback { z-index:0; }
#lsJournal .j-search__field { display:flex; align-items:center; }
#lsJournal .j-search__field input { padding-right:50px; }
#lsJournal .j-search__submit { border:0; cursor:pointer; background:transparent; position:absolute; right:8px; width:37px; height:37px; display:grid;place-items:center;color:#087d75;border-radius:6px; }
#lsJournal .j-search__submit:hover { background:#e5f2ef; }
#lsJournal .j-search__submit svg { pointer-events:none; position:static; transform:none; width:19px;height:19px;stroke:#087d75; }
#lsJournal .j-search__field > svg { left:14px; }
#lsJournal .j-page-list__button { text-decoration:none; }
#lsJournal .j-page-list__button[aria-disabled='true'] { opacity:.36; cursor:default; pointer-events:none; }
#lsJournal .j-notice__retry { display:inline-block; text-decoration:none; }
#lsJournal .j-card__image-fallback { font-family: 'Newsreader',Georgia,serif; letter-spacing:-.02em; }
#lsJournal .j-card__image-fallback svg { width:92px;height:92px;opacity:.66; }
#lsJournal .j-card__media:focus-visible { outline:3px solid #0d8b80; outline-offset:3px; }
#lsJournal .j-search__reset { display:inline-block; margin-top:7px; font-size:11px;color:#087d75;font-weight:700; }
#lsJournal .j-card__meta .j-card__meta-dot { flex:none; }
@media(max-width:650px){#lsJournal .j-search{flex-basis:auto;}#lsJournal .j-card--featured .j-card__media { min-height:190px; }}