/*
 * ESN Press theme overrides.
 * Loaded on top of the OJS default theme (see EsnPressThemePlugin::init()),
 * so only visual overrides live here — layout, grid, responsive rules,
 * dropdown JS and icon fonts all come from the parent theme.
 *
 * Palette/layout modeled directly on a live ScienceDirect journal page
 * (https://www.sciencedirect.com/journal/international-journal-of-solids-and-structures):
 * a solid teal masthead band behind the journal title, a plain white
 * sub-nav row below it, black sans-serif text throughout (ScienceDirect
 * uses no serif anywhere — titles included), a blue accent for links and
 * buttons, and plain stacked meta text rather than heavy boxed panels.
 */

:root {
  --esn-ink: #1a1a1a;          /* near-black body/heading text */
  --esn-ink-light: #595959;    /* secondary text (authors, meta labels) */
  --esn-teal: #0e6c86;         /* masthead band, behind the journal title */
  --esn-teal-dark: #084f63;
  --esn-blue: #0b5ca8;         /* interactive accent: links, buttons, hover */
  --esn-blue-dark: #084a87;
  --esn-gold: #b58b2b;
  --esn-wash: #faf8f3;
  --esn-background: #ffffff;
  --esn-muted: #f5f5f5;        /* light grey box background (sparingly) */
  --esn-border: #d9d9d9;
  --esn-text: rgba(26, 26, 26, 0.92);
  --esn-text-light: rgba(26, 26, 26, 0.6);
  --esn-orange: #e8631c;       /* publisher wordmark accent, ~Elsevier orange */
  --esn-orange-dark: #c2500f;
}

/* The full-bleed masthead/Editors-band technique used further down this
   file (position:absolute; width:100vw; transform:translateX(...)) relies
   on 100vw, which browsers define as the viewport width INCLUDING the
   scrollbar — a few pixels wider than the actual visible/scrollable area
   (document.documentElement.clientWidth, which excludes it). Those
   absolutely-positioned bands were overflowing just past the true right
   edge by that scrollbar width, which is enough on its own to make the
   whole page horizontally scrollable (confirmed: scrollWidth > clientWidth
   site-wide, on every page, since the masthead band is a shared header
   component). Clip it here rather than trying to chase an exact pixel-perfect
   vw/scrollbar calculation — pages should only ever scroll vertically. */
html {
  overflow-x: hidden;
}

body {
  background: var(--esn-background);
  color: var(--esn-text);
  overflow-x: hidden;
}

a {
  color: var(--esn-blue);
}

a:hover,
a:focus {
  color: var(--esn-blue-dark);
}

/* Keyboard-focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--esn-blue);
  outline-offset: 2px;
}

/* ---- Main content area: readable typography for prose ---- */
/* Applies uniformly to article bodies, About/static pages, policy pages,
   and any other page rendered inside the main content wrapper.
   Previously this only set heading *color* — font-size/weight/spacing
   fell through to bare browser defaults, so an <h3> (used throughout the
   9 policy pages for sections like "Authorship", "Disclosure") rendered
   barely bigger than body text: technically a heading, but not one a
   reader's eye would actually catch, making genuinely well-structured
   content read as one long undifferentiated block. This gives each level
   real size/weight/spacing contrast instead of relying on bold alone.
   Deliberately placed early in this file (rather than near the similarly
   named rule further down) so more specific card/section heading rules
   declared later — .esn_info_card h2, .current_issue h2, etc. — continue
   to win the cascade for the properties they override (e.g. margin-top:0
   to sit flush inside a card), while still inheriting this rule's
   font-size/weight/spacing for anything they don't touch. */

.pkp_structure_main h1 {
  color: var(--esn-ink);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1.25rem;
}

.pkp_structure_main h2 {
  color: var(--esn-ink);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--esn-border);
}

.pkp_structure_main h2:first-child {
  margin-top: 0;
}

.pkp_structure_main h3 {
  color: var(--esn-teal);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 2rem 0 0.6rem;
}

.pkp_structure_main p,
.pkp_structure_main li {
  line-height: 1.6;
}

.pkp_structure_main p {
  margin: 0 0 1rem;
}

.pkp_structure_main ul,
.pkp_structure_main ol {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
}

.pkp_structure_main li + li {
  margin-top: 0.35rem;
}

/* ---- Publisher utility bar ---- */
/* New row above the masthead (templates/frontend/components/header.tpl
   addition): ESN Press wordmark/logo on the left, "Journals & Books" link
   on the right — the equivalent of the thin grey bar above ScienceDirect's
   own teal banner (their tree logo + Journals & Books/Help/Search/Sign in). */

.esn_utility_bar {
  background: var(--esn-background);
  border-bottom: 1px solid var(--esn-border);
}

.esn_utility_bar_inner {
  /* Edge-to-edge (not centered in the ~1160px content column like the rest
     of the page) so the ESN Press logo sits close to the true left edge of
     the viewport and "Journals & Books"/login sit close to the true right
     edge, matching how the reference site's own logo and utility links sit
     near the page edges rather than in a narrow centered strip. */
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.esn_utility_brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  color: var(--esn-orange);
  font-weight: 400;
  /* 20% larger than the original 14px (0.875rem) */
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.esn_utility_brand:hover {
  color: var(--esn-orange-dark);
}

.esn_utility_logo {
  /* 100% larger than the original 28px, then +20% again per follow-up request */
  height: 67px;
  width: auto;
}

/* Right-hand group: "Journal & Conferences"/"Help" + the native
   login/account widget, moved here (from inside .pkp_site_nav_menu, see
   header.tpl) so both sit on the same line, matching the reference site's
   single top utility row instead of two stacked rows. */
.esn_utility_right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.5rem;
}

.esn_utility_links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.esn_utility_links a {
  display: flex;
  align-items: center;
  color: var(--esn-ink-light);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.esn_utility_links a:hover {
  color: var(--esn-blue);
}

.esn_utility_help_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.35rem;
  border: 1px solid var(--esn-ink-light);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
}

.esn_utility_help:hover .esn_utility_help_icon {
  border-color: var(--esn-blue);
}

/* The parent theme absolutely-positions this widget (relative to
   .pkp_head_wrapper, offset for the header's own layout) because it
   normally lives inside <nav class="pkp_site_nav_menu">. Now that it's
   been moved into the utility bar's flex row instead, cancel that
   positioning so it behaves like a normal inline flex item. */
.esn_utility_bar .pkp_navigation_user_wrapper {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  margin: 0;
  padding: 0;
  text-align: right;
  z-index: auto;
}

/* The parent theme also gives the inner <ul> itself an explicit
   width:1160px at this breakpoint (to match its own content column) —
   harmless in the widget's original absolutely-positioned spot, but now
   that it's a normal flex item this forced the whole utility bar row to
   overflow far past the right edge of the viewport, pushing "Journals &
   Books" out of its intended position instead of sitting close to login. */
.esn_utility_bar .pkp_navigation_user {
  width: auto;
}

/* That reserved top padding on .pkp_head_wrapper existed only to make room
   for the login widget's old absolutely-positioned spot; it's no longer
   needed now that the widget lives in the utility bar instead. */
@media (min-width: 992px) {
  .pkp_head_wrapper {
    padding-top: 0;
  }
}

/* ---- Header / masthead ---- */
/* .pkp_site_name_wrapper and .pkp_site_nav_menu are sibling rows inside
   the same .pkp_structure_head, so they can be colored independently:
   a solid teal band behind the title, plain white below it for the nav. */

.pkp_structure_head {
  border-bottom: 1px solid var(--esn-border);
}

/* .pkp_site_name_wrapper itself sits inside the page's centered/constrained
   content column (it does NOT span the full viewport), so a plain
   background-color on it leaves white gutters left/right. The ::before
   pseudo-element breaks out to full viewport width to give a full-bleed
   band without restructuring the surrounding layout. No z-index is set:
   a ::before pseudo-element is always painted before (i.e. behind, in
   normal stacking order) the element's real children, so it naturally
   sits behind the title/cover-image content without needing z-index —
   using a negative z-index here previously pushed it behind an opaque
   ancestor's own background instead, hiding the band entirely. */
.pkp_site_name_wrapper {
  position: relative;
  /* 15% taller than the original 1.5rem */
  padding-top: 1.725rem;
  padding-bottom: 1.725rem;
}

.pkp_site_name_wrapper::before {
  content: "";
  /* The parent theme applies a clearfix mixin (.pkp_helpers_clear()) to
     this same element, which sets ::before { display: table; } for
     clearing floated children. A table-display box doesn't stretch to
     fill top:0/bottom:0 insets the way a block box does, so it collapsed
     to 0 height — override back to block explicitly. */
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--esn-teal);
}

/* Cover thumbnail (templates/frontend/components/header.tpl override),
   rendered only if a Homepage Image has been uploaded — sits to the left
   of the title, like a print-cover thumbnail beside a journal name. */
.pkp_site_name_wrapper.has_esn_cover {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* The stock theme also renders the same Homepage Image a second time,
   inline in the homepage body (templates/frontend/pages/indexJournal.tpl,
   .homepage_image) — now that it's shown once in the masthead, hide the
   duplicate rather than showing the cover twice on the same page. */
.homepage_image {
  display: none;
}

.esn_cover_thumb {
  /* The full-bleed ::before on the wrapper (above) is position:absolute,
     which paints it above this img's default static-flex-item layer —
     without its own stacking context this thumbnail was invisible,
     hidden behind the teal band. */
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  /* 90px, +15%, then +20% again per follow-up request = 125px */
  width: 125px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.esn_cover_link {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.esn_cover_link:hover .esn_cover_thumb,
.esn_cover_link:focus-visible .esn_cover_thumb {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
}

.esn_cover_link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.pkp_site_name .is_text,
.pkp_site_name > a {
  color: #ffffff;
  font-weight: 700;
}

/* Genuine open-access status line under the title (see header.tpl for the
   guard limiting this to the homepage) — echoes the reference site's own
   "Supports open access" line under its masthead title. */
.esn_open_access {
  margin: 0.35rem 0 0;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.pkp_site_nav_toggle {
  color: #ffffff;
}

/* ---- Journal Insights bar (homepage,
   templates/frontend/pages/indexJournal.tpl addition) ---- */
/* Echoes the reference site's own publishing-timeline bar: a plain white
   row of stat blocks separated by thin vertical dividers, plus a
   "View all insights" link. Every value is "N/A" — see indexJournal.tpl's
   top comment for why (no completed review cycles yet to compute honest
   turnaround averages from). .esn_insight_stat/_value/_label are also
   reused, unstyled-bar, inside the "insights" static page itself
   (frontend/pages/staticPage.tpl's rendered rich-text content) via
   .esn_insights_grid, so the two places look consistent. */
.esn_insights_bar {
  background: var(--esn-background);
  border-bottom: 1px solid var(--esn-border);
}

.esn_insights_bar_inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.esn_insight_stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--esn-border);
}

.esn_insight_stat:first-child {
  padding-left: 0;
  border-left: none;
}

.esn_insight_value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--esn-ink);
}

.esn_insight_label {
  font-size: 0.85rem;
  color: var(--esn-ink-light);
}

.esn_insights_view_all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  color: var(--esn-ink);
  font-weight: 600;
  text-decoration: none;
}

.esn_insights_view_all:hover {
  color: var(--esn-blue);
}

.esn_insights_view_all_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--esn-blue);
  color: #ffffff;
  border-radius: 2px;
  font-size: 1.1rem;
  line-height: 1;
}

/* Grid version of the same stat blocks, used inside the "insights" static
   page's rich-text content (see the SQL-inserted page content — a plain
   <div class="esn_insights_grid"> wrapping four .esn_insight_stat blocks,
   same markup/classes as the homepage bar above, minus the "View all"
   link since the page itself IS that destination). */
.esn_insights_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin: 1rem 0 1.5rem;
}

.esn_insights_grid .esn_insight_stat {
  padding-left: 1rem;
  border-left: 2px solid var(--esn-teal);
}

/* ---- Editors band (homepage, templates/frontend/pages/indexJournal.tpl
   addition) ---- */
/* A second teal band, echoing the reference site's own "Editors" band
   above its articles listing — real founding chairs of the ISDTDE society
   (see indexJournal.tpl for the source citation), not journal staff. */
.esn_editors_band {
  /* Sits inside the page's centered/constrained main content column (same
     situation as .pkp_site_name_wrapper in the masthead), so the same
     full-bleed ::before trick is used here to span edge-to-edge like the
     title band, rather than just the width of the main content column. */
  position: relative;
  margin-top: 1.25rem;
  padding: 2rem 1.5rem;
}

.esn_editors_band::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--esn-teal);
}

/* NOTE: this band previously needed a translateX compensation here
   because .pkp_structure_main sat in a LEFT-floated sidebar layout,
   offset from true page-center by half the sidebar's width — with the
   "Make a Submission" sidebar removed entirely (moved into the nav bar
   instead), .pkp_structure_main is once again the full centered content
   column, same as the masthead's .pkp_site_name_wrapper, so the plain
   left:50%/translateX(-50%) above is correct on its own again. If a
   sidebar is ever reintroduced, re-add a compensation rule here (half the
   sidebar's width, scoped to the breakpoint where it's actually floated)
   rather than assuming this still needs none. */

.esn_editors_band_inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
}

.esn_editors_header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

/* Higher specificity than the generic ".pkp_structure_main h1/h2/h3"
   typography rule further down this file (both are one-class-plus-type
   selectors, so without this extra ".esn_editors_band" qualifier the later
   rule would win the cascade on equal specificity and silently turn this
   text black instead of white). */
.esn_editors_band .esn_editors_header h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.3rem;
}

.esn_editors_divider {
  color: rgba(255, 255, 255, 0.5);
}

.esn_editors_header a {
  color: #ffffff;
  font-size: 0.9rem;
  text-decoration: underline;
}

.esn_editors_header a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.esn_editors_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.esn_editor_card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.esn_editor_avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

/* Same specificity fix as .esn_editors_header h2 above — this is an h3,
   also targeted by the later ".pkp_structure_main h1/h2/h3" rule. */
.esn_editors_band .esn_editor_name {
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
}

.esn_editor_affiliation {
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

/* ---- Primary navigation ---- */
/* Plain white nav row (background comes from the @bg-base LESS override
   in EsnPressThemePlugin::init(), which always wins over the default
   theme's own "baseColour" option) with a blue underline indicator on
   hover/active, rather than a solid color block. */

.pkp_navigation_primary > li > a {
  color: var(--esn-ink);
  font-weight: 600;
  border-bottom: 3px solid transparent;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: var(--esn-blue);
  background: transparent;
  border-bottom-color: var(--esn-blue);
}

.pkp_navigation_primary .pkp_nav_list li ul {
  background: var(--esn-background);
  border: 1px solid var(--esn-border);
  border-top: 3px solid var(--esn-blue);
}

.pkp_navigation_primary .pkp_nav_list li ul a {
  color: var(--esn-ink);
}

.pkp_navigation_primary .pkp_nav_list li ul a:hover,
.pkp_navigation_primary .pkp_nav_list li ul a:focus {
  background: var(--esn-muted);
  color: var(--esn-blue);
}

.pkp_search button[type="submit"] {
  color: var(--esn-ink);
}

/* ---- Right-aligned nav actions (Search / Guide for Authors / Make a
   Submission) ---- */
/* These three normally render as: a <ul> of plain nav links, then a
   separate sibling <div> for search — both left-aligned in source order,
   with "Guide for Authors" and "Make a Submission" looking identical to
   plain nav links like "About". To group all three at the right edge with
   a distinct "modern" (button) look:
   1. .pkp_navigation_primary_wrapper becomes the flex container.
   2. .pkp_navigation_primary (the <ul>) is set to display:contents — this
      un-boxes the <ul> without changing the DOM, so its <li> children
      become direct flex items of the wrapper, sitting as true siblings of
      the search <div> instead of being trapped one level deeper. (Doesn't
      affect the About/Publish dropdown hover behavior, which triggers off
      the <li> elements themselves, not the <ul> box.)
   3. "Make a Submission" and "Guide for Authors" are always the LAST two
      <li> in the primary menu (they're appended at the end of the nav via
      Setup > Navigation Menus) — targeted with :nth-last-child rather
      than a class, since OJS's generic {load_menu} output doesn't give
      custom remote-URL items a distinguishing class of their own. If more
      items are ever added after them in the menu, these selectors will
      need updating to match. */
.pkp_navigation_primary_wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pkp_navigation_primary {
  display: contents;
}

.pkp_navigation_search_wrapper {
  order: 1;
  margin-left: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pkp_navigation_primary > li:nth-last-child(2),
.pkp_navigation_primary > li:nth-last-child(1) {
  order: 3;
}

/* "Make a Submission" (nth-last-child(2)) — solid CTA, rounded rect
   (design "B") in the site's blue accent (design "C"'s color choice —
   picked over multiple design options shown to the user, who chose "B's
   shape with C's colors"). Icon comes from the nav item's own title HTML
   (navigationMenu.tpl renders getLocalizedTitle() unescaped, so a small
   <i class="fa fa-upload"> was set directly on the DB title rather than
   needing a template override). */
.pkp_navigation_primary > li:nth-last-child(2) > a {
  display: inline-flex;
  align-items: center;
  background: var(--esn-blue);
  color: #ffffff;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  line-height: 1.2;
}

.pkp_navigation_primary > li:nth-last-child(2) > a:hover,
.pkp_navigation_primary > li:nth-last-child(2) > a:focus {
  background: var(--esn-blue-dark);
  color: #ffffff;
}

.pkp_navigation_primary > li:nth-last-child(1) {
  order: 2;
}

/* "Guide for Authors" (nth-last-child(1)) — ghost link (design "C"'s
   quieter secondary treatment), same fa-book icon-in-title approach. */
.pkp_navigation_primary > li:nth-last-child(1) > a {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--esn-ink);
  font-weight: 500;
  padding: 0.5rem 0.25rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  line-height: 1.2;
}

.pkp_navigation_primary > li:nth-last-child(1) > a:hover,
.pkp_navigation_primary > li:nth-last-child(1) > a:focus {
  background: transparent;
  color: var(--esn-blue);
  border-bottom-color: var(--esn-blue);
}

/* ---- Buttons and form controls ---- */

.cmp_button,
.cmp_form .buttons button {
  background: var(--esn-blue);
  border-color: var(--esn-blue);
  color: #ffffff;
  border-radius: 2px;
  font-weight: 600;
}

.cmp_button:hover,
.cmp_form .buttons button:hover {
  background: var(--esn-blue-dark);
  border-color: var(--esn-blue-dark);
}

/* ---- Current issue info band ---- */
/* ScienceDirect's homepage is built from several visually distinct
   stacked sections (banner, editors band, articles-with-tabs). OJS's
   homepage is a single flat column by default; this gives the issue
   metadata its own light band, separate from the plain white article
   grid below, to create the same kind of sectioned structure. */

/* ---- Homepage "About the journal / Article publishing options" ---- */
/* Injected via the Templates::Index::journal hook (see
   EsnPressThemePlugin::injectHomepageInfo() and
   templates/frontend/components/homepageInfo.tpl) — a two-column card
   section, matching the equivalent area on the reference ScienceDirect
   journal page, using only genuine journal content (aims & scope, real
   open-access/APC status), no fabricated metrics. */

.esn_info_kicker {
  margin: 0 0 0.55rem;
  color: var(--esn-blue-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.esn_homepage_info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 0 0 2rem;
  padding: 0 0 1.75rem;
  border-bottom: 1px solid rgba(26, 54, 93, 0.1);
}

.esn_info_card {
  padding: 0 0 0 1.1rem;
  border-left: 3px solid rgba(196, 154, 59, 0.85);
}

.esn_info_card h2 {
  margin: 0 0 0.7rem;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.55rem;
  line-height: 1.2;
}

.esn_info_card h3 {
  color: var(--esn-ink);
  margin: 1rem 0 0.25rem;
  font-size: 0.98rem;
  line-height: 1.35;
}

.esn_info_card p {
  margin: 0.55rem 0 0;
  color: var(--esn-ink-light);
  font-size: 0.98rem;
  line-height: 1.65;
}

.esn_info_card .esn_society_note {
  margin-top: 0.85rem;
  color: var(--esn-ink);
  font-size: 0.92rem;
}

.esn_info_card .esn_society_note a {
  display: inline;
  margin-top: 0;
  font-weight: 700;
  line-height: inherit;
}

.esn_standards_card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
  background: #fbfaf7;
  border: 1px solid rgba(26, 54, 93, 0.1);
  border-left: 3px solid rgba(196, 154, 59, 0.85);
  border-radius: 4px;
}

.esn_standards_card .esn_info_kicker {
  grid-column: 1 / -1;
  margin-bottom: -0.25rem;
}

.esn_standards_card h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.esn_standards_card p {
  max-width: 58rem;
  margin-top: 0.25rem;
}

.esn_info_card > a {
  display: inline-flex;
  margin-top: 0.95rem;
  color: var(--esn-blue-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 101, 132, 0.28);
}

.esn_info_card > a:hover {
  color: var(--esn-blue);
  border-bottom-color: var(--esn-blue);
}

.esn_policy_links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  justify-content: flex-start;
  margin-top: 0;
}

.esn_policy_links a {
  display: inline-flex;
  margin-top: 0;
  color: var(--esn-blue-dark);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 101, 132, 0.28);
}

.esn_policy_links a:hover {
  color: var(--esn-blue);
  border-bottom-color: var(--esn-blue);
}

.esn_author_resources {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(26, 54, 93, 0.12);
}

.esn_author_resources h3 {
  margin-top: 0;
}

.esn_author_resources p {
  max-width: 46rem;
}

.esn_template_download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 42px;
  padding: 0.65rem 1rem;
  background: var(--esn-blue-dark);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--esn-blue-dark);
  border-radius: 4px;
}

.esn_template_download:hover,
.esn_template_download:focus-visible {
  background: var(--esn-blue);
  border-color: var(--esn-blue);
  color: #ffffff;
}

.current_issue {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 1.75rem;
  margin-bottom: 2rem;
}

.current_issue h2 {
  margin: 0 0 1.1rem;
  padding: 0;
  border: none;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2rem;
  line-height: 1.18;
}

.current_issue h2::after {
  content: "";
  display: block;
  width: 2.7rem;
  height: 2px;
  margin-top: 0.65rem;
  background: var(--esn-gold);
}

.current_issue .current_issue_title {
  color: var(--esn-ink-light);
}

.current_issue .obj_issue_toc .heading {
  margin-bottom: 1rem;
}

.current_issue .sections > .section > h3 {
  position: relative;
  padding-left: 0.85rem;
  color: var(--esn-ink);
}

.current_issue .sections > .section > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  background: var(--esn-blue);
}

.esn_home_issue_toc {
  margin-top: 0.5rem;
}

.esn_home_issue_layout {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.35rem;
  padding: 1rem 1.1rem;
  background: var(--esn-wash);
  box-shadow: inset 3px 0 0 rgba(181, 139, 43, 0.45);
}

.esn_home_issue_cover {
  display: block;
  width: 155px;
}

.esn_home_issue_cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14);
}

.esn_home_issue_kicker,
.esn_home_kicker {
  color: var(--esn-teal-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.esn_home_issue_body h3 {
  margin: 0.35rem 0 0;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.65rem;
  line-height: 1.18;
}

.esn_home_issue_body h3 a {
  color: var(--esn-ink);
  text-decoration: none;
}

.esn_home_issue_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin-top: 0.65rem;
  color: var(--esn-ink-light);
  font-size: 0.92rem;
}

.esn_home_issue_meta span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.75rem;
  border-radius: 50%;
  background: var(--esn-gold);
  vertical-align: middle;
}

.esn_home_issue_links,
.esn_home_section_header > a,
.esn_news_row .read_more {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 0.9rem;
}

.esn_home_issue_links a,
.esn_home_section_header > a,
.esn_news_row .read_more {
  color: var(--esn-blue);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.esn_home_issue_articles_header {
  margin: 0 0 0.75rem;
}

.esn_home_issue_articles_header h3 {
  margin: 0;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.35rem;
  line-height: 1.2;
}

.esn_home_issue_articles_header p {
  margin: 0.25rem 0 0;
  color: var(--esn-ink-light);
  font-size: 0.86rem;
}

.esn_home_issue_articles {
  display: block;
}

.esn_home_issue_articles > li {
  margin: 0;
}

.page_index_journal .esn_home_issue_articles .obj_article_summary.esn_article_row {
  height: auto;
  padding: 1.1rem 1.2rem 1.15rem;
  border: 1px solid rgba(26, 54, 93, 0.1);
  border-left: 3px solid rgba(196, 154, 59, 0.85);
  border-radius: 4px;
  background: #fbfaf7;
  box-shadow: none;
}

.page_index_journal .esn_home_issue_articles .esn_article_kicker {
  margin-bottom: 0.55rem;
}

.page_index_journal .esn_home_issue_articles .esn_article_kicker span {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.18rem 0.45rem;
  background: #ffffff;
  border: 1px solid rgba(0, 101, 132, 0.18);
  border-radius: 999px;
  color: var(--esn-blue-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page_index_journal .esn_home_issue_articles .esn_article_kicker span:not(:last-child)::after {
  content: none;
}

.page_index_journal .esn_home_issue_articles .obj_article_summary.esn_article_row .title,
.page_index_journal .esn_home_issue_articles .obj_article_summary.esn_article_row .title a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.45rem;
  line-height: 1.22;
}

.page_index_journal .esn_home_issue_articles .esn_article_abstract {
  max-width: 48rem;
  margin-top: 0.65rem;
  color: var(--esn-ink-light);
}

.page_index_journal .esn_home_issue_articles .esn_article_keyword_chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.page_index_journal .esn_home_issue_articles .esn_keyword_chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.22rem 0.5rem;
  background: #ffffff;
  border: 1px solid rgba(26, 54, 93, 0.12);
  border-radius: 999px;
  color: var(--esn-ink-light);
  font-size: 0.78rem;
  line-height: 1.2;
}

.current_issue > a.read_more {
  display: none !important;
}

.page_index_journal .esn_home_issue_articles .galleys_links {
  list-style: none;
  margin-top: 1.05rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
}

.page_index_journal .esn_home_issue_articles .galleys_links li {
  display: flex;
  align-items: center;
  margin: 0;
}

.page_index_journal .esn_home_issue_articles .galleys_links a.obj_galley_link,
.page_index_journal .esn_home_issue_articles .galleys_links a.esn_view_article_link,
.page_index_journal .esn_home_issue_articles .esn_article_tool summary {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--esn-blue);
  border-radius: 0;
  color: var(--esn-blue);
  padding: 0 0 1px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: none;
}

.page_index_journal .esn_home_issue_articles .galleys_links a.obj_galley_link {
  min-height: 2.15rem;
  padding: 0.45rem 0.75rem;
  background: var(--esn-blue);
  border: 1px solid var(--esn-blue);
  border-radius: 3px;
  color: #ffffff;
  text-decoration: none;
}

.page_index_journal .esn_home_issue_articles .galleys_links a.obj_galley_link:hover,
.page_index_journal .esn_home_issue_articles .galleys_links a.esn_view_article_link:hover,
.page_index_journal .esn_home_issue_articles .esn_article_tool summary:hover {
  opacity: 0.65;
}

.esn_home_announcements {
  margin: 2rem 0;
}

.esn_home_section_header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.esn_home_section_header h2 {
  margin: 0.25rem 0 0;
  padding: 0;
  border: none;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.8rem;
  line-height: 1.2;
}

.esn_home_section_header h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.55rem;
  background: var(--esn-gold);
}

.esn_home_news_list {
  display: grid;
  gap: 0.85rem;
}

.esn_news_row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1rem 1.15rem;
  background: var(--esn-wash);
  box-shadow: inset 3px 0 0 rgba(181, 139, 43, 0.45);
}

.esn_news_row .date {
  margin: 0;
  color: var(--esn-ink-light);
  font-size: 0.82rem;
  font-weight: 700;
}

.esn_news_row .obj_announcement_summary_details {
  display: contents;
}

.esn_news_row h3 {
  grid-column: 2;
  margin: 0;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.35rem;
  line-height: 1.22;
}

.esn_news_row h3 a {
  color: var(--esn-ink);
  text-decoration: none;
}

.esn_news_row h3 a:hover,
.esn_news_row h3 a:focus {
  color: var(--esn-blue);
}

.esn_news_row .summary {
  grid-column: 2;
  margin-top: 0.65rem;
  color: var(--esn-text);
  line-height: 1.6;
}

.esn_news_row .read_more {
  grid-column: 2;
  margin-top: 0.15rem;
}

/* ---- Article listings (homepage, current issue, archives) ---- */
/* A responsive card grid instead of a single stacked column, matching
   the tiled article layout ScienceDirect uses on its journal homepage. */

.cmp_article_list.articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cmp_article_list.articles > li {
  margin: 0;
  padding: 0;
}

.obj_article_summary {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--esn-background);
  border: 1px solid var(--esn-border);
  border-radius: 3px;
  padding: 1.25rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.obj_article_summary:hover {
  border-color: var(--esn-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.obj_article_summary .title,
.obj_article_summary .title a {
  color: var(--esn-ink);
  font-weight: 700;
}

.obj_article_summary .title a:hover {
  color: var(--esn-blue);
}

.obj_article_summary .authors {
  color: var(--esn-ink-light);
  margin-top: 0.35rem;
}

.obj_article_summary .galleys_links {
  margin-top: auto;
  padding-top: 0.75rem;
}

/* ---- Single article page ---- */

.page_article .page_title,
.page_title {
  color: var(--esn-ink);
  font-weight: 700;
}

/* Plain stacked meta sections with a divider, not boxed panels —
   ScienceDirect's own article sidebar/meta is plain text with dividers,
   not filled/bordered cards. */
.page_article .item {
  border-top: 1px solid var(--esn-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

/* Article view 0.16.0: scholarly header + utility rail. This deliberately
   uses mostly type, rules, and restrained accents, matching the quiet
   editorial direction chosen for the issue page rather than badge-heavy UI. */
.page_article .pkp_structure_main {
  max-width: 1160px;
}

.page_article .cmp_breadcrumbs {
  margin-bottom: 1.75rem;
}

.page_article .obj_article_details.esn_article_details {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--esn-text);
}

.esn_article_header {
  position: relative;
  margin: 0 0 1.4rem;
  padding: 2rem 0 1.5rem;
  border-top: 3px solid var(--esn-teal-dark);
  border-bottom: none;
  background:
    linear-gradient(90deg, rgba(250, 248, 243, 0.9), rgba(255, 255, 255, 0));
}

.esn_article_kicker,
.esn_article_header_meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0;
  color: var(--esn-ink-light);
  font-size: 0.86rem;
  line-height: 1.4;
}

.esn_article_kicker > span:not(:last-child)::after,
.esn_article_header_meta > span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.75rem;
  border-radius: 50%;
  background: var(--esn-gold);
  vertical-align: middle;
}

.esn_article_type {
  color: var(--esn-orange-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page_article .esn_article_title {
  max-width: 920px;
  margin: 0.85rem 0 0.75rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(2.15rem, 4vw, 3.55rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
  color: var(--esn-ink);
}

.page_article .esn_article_subtitle {
  max-width: 820px;
  margin: -0.15rem 0 0.85rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--esn-ink-light);
  border: none;
  padding: 0;
}

.esn_article_authors {
  max-width: 820px;
  margin: 1.25rem 0 0;
}

.esn_article_authors ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.esn_article_authors li {
  margin: 0 0 0.65rem;
}

.esn_article_authors .name {
  display: block;
  color: var(--esn-ink);
  font-weight: 700;
  line-height: 1.35;
}

.esn_article_authors .affiliation,
.esn_article_authors .orcid,
.esn_corresponding_note {
  display: block;
  margin-top: 0.12rem;
  color: var(--esn-ink-light);
  font-size: 0.9rem;
  line-height: 1.5;
}

.esn_corresponding_note {
  margin: 0.9rem 0 0;
  font-style: italic;
}

.esn_article_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.esn_article_actions a,
.esn_article_tools_panel .obj_galley_link,
.esn_reader_actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid var(--esn-teal-dark);
  border-radius: 2px;
  background: #fff;
  color: var(--esn-teal-dark);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: none;
}

.esn_article_actions .obj_galley_link,
.esn_article_tools_panel .obj_galley_link,
.esn_reader_link {
  background: var(--esn-teal-dark);
  color: #fff;
}

.esn_article_actions a:hover,
.esn_article_actions a:focus,
.esn_article_tools_panel .obj_galley_link:hover,
.esn_article_tools_panel .obj_galley_link:focus,
.esn_reader_actions a:hover,
.esn_reader_actions a:focus {
  background: var(--esn-ink);
  border-color: var(--esn-ink);
  color: #fff;
}

.esn_article_jump_nav {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 0 1.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(8, 79, 99, 0.16);
  border-bottom: 1px solid rgba(8, 79, 99, 0.16);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
}

.esn_article_jump_nav a {
  color: var(--esn-ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.esn_article_jump_nav a:hover,
.esn_article_jump_nav a:focus {
  color: var(--esn-blue);
  border-bottom-color: var(--esn-blue);
}

.page_article .esn_article_layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(260px, 320px);
  gap: 2.35rem;
  align-items: start;
  margin-left: 0;
  margin-right: 0;
}

.page_article .esn_article_main,
.page_article .esn_article_tools_panel {
  width: auto;
  float: none;
}

.page_article .esn_article_main {
  grid-column: 1;
  grid-row: 1;
  max-width: 760px;
}

.page_article .esn_article_tools_panel {
  grid-column: 2;
  grid-row: 1;
}

.page_article .esn_article_main p,
.page_article .esn_article_main li,
.page_article .esn_article_main dd {
  font-size: 1.06rem;
  line-height: 1.68;
}

.page_article .esn_article_main .item {
  margin: 0 0 2.3rem;
  padding: 0;
  border-top: none;
}

.page_article .esn_article_section > .label,
.page_article .esn_article_keywords_full > .label {
  position: relative;
  margin: 0 0 1rem;
  padding: 0 0 0.25rem;
  border-bottom: none;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.45rem;
  line-height: 1.25;
}

.page_article .esn_article_section > .label::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  margin-top: 0.55rem;
  background: var(--esn-gold);
}

.page_article .esn_article_keywords_full {
  padding: 0.25rem 0 0.9rem;
  border-top: none;
  border-bottom: none;
}

.page_article .esn_article_keywords_full .label {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
}

.page_article .esn_article_keywords_full .value {
  color: var(--esn-ink-light);
  font-size: 0.95rem;
}

.esn_article_statements dl,
.esn_identifier_block dl {
  margin: 0;
}

.esn_article_statements dl > div,
.esn_identifier_block dl > div {
  padding: 0.35rem 0 0.95rem;
  border-top: none;
}

.esn_article_statements dl > div:first-child,
.esn_identifier_block dl > div:first-child {
  border-top: none;
  padding-top: 0;
}

.esn_article_statements dt,
.esn_identifier_block dt {
  color: var(--esn-ink);
  font-weight: 700;
}

.esn_article_statements dd,
.esn_identifier_block dd {
  margin: 0.2rem 0 0;
  color: var(--esn-ink-light);
}

.page_article .references p {
  padding-left: 1.25rem;
  text-indent: -1.25rem;
}

.esn_article_tools_panel {
  border-left: none;
  padding-left: 0;
}

.esn_article_tools_inner {
  position: sticky;
  top: 3.2rem;
  padding: 1.2rem 1.25rem;
  background: var(--esn-wash);
  border-radius: 2px;
  box-shadow: inset 3px 0 0 rgba(181, 139, 43, 0.45);
}

.esn_article_tools_panel .item {
  margin: 0;
  padding: 0.85rem 0 1.05rem;
  border-top: none;
}

.esn_article_tools_panel .item:first-child {
  border-top: none;
  padding-top: 0;
}

.esn_article_tools_panel .label {
  margin: 0 0 0.55rem;
  padding: 0;
  border: none;
  color: var(--esn-ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.esn_article_tools_panel p,
.esn_article_tools_panel li,
.esn_article_tools_panel dd {
  font-size: 0.86rem;
  line-height: 1.55;
}

.esn_article_tools_panel .galleys_links,
.esn_article_tools_panel .supplementary_galleys_links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.esn_article_tools_panel .galleys_links li {
  margin: 0;
}

.esn_reader_actions {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.esn_reader_actions a {
  width: 100%;
}

.esn_download_link {
  background: #fff;
  color: var(--esn-teal-dark);
}

.esn_article_tools_panel .obj_galley_link {
  width: 100%;
  margin: 0;
}

.esn_citation_text {
  color: var(--esn-text);
  overflow-wrap: break-word;
}

.esn_article_tool {
  position: relative;
  margin-top: 0.7rem;
}

.esn_citation_formats {
  position: static;
  width: auto;
  max-width: none;
  margin-top: 0.55rem;
  display: grid;
  gap: 0.8rem;
  padding: 0;
  border: none;
  box-shadow: none;
}

.esn_share_links a {
  color: var(--esn-blue);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.esn_citation_formats h3 {
  margin: 0 0 0.35rem;
  color: var(--esn-ink);
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.esn_citation_formats pre {
  max-width: 100%;
  margin: 0;
  padding: 0.75rem;
  overflow-x: auto;
  border: 1px solid rgba(8, 79, 99, 0.15);
  border-radius: 2px;
  background: #f7fafb;
  color: var(--esn-text);
  white-space: pre-wrap;
}

.esn_citation_formats code {
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.esn_share_links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.esn_copy_doi {
  margin: 0.65rem 0 0;
  color: var(--esn-ink-light);
  overflow-wrap: break-word;
}

.esn_copy_doi span {
  color: var(--esn-ink);
}

.esn_metrics_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 0;
}

.esn_metrics_grid div {
  padding: 0.65rem 0.45rem;
  background: var(--esn-wash);
  text-align: center;
}

.esn_metrics_grid strong,
.esn_metrics_grid span {
  display: block;
}

.esn_metrics_grid strong {
  color: var(--esn-ink);
  font-size: 1rem;
}

.esn_metrics_grid span {
  color: var(--esn-ink-light);
  font-size: 0.72rem;
}

.esn_timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.esn_timeline li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.32rem 0;
  border-top: none;
}

.esn_timeline li:first-child {
  border-top: none;
}

.esn_timeline span {
  color: var(--esn-ink-light);
}

.esn_timeline strong {
  color: var(--esn-ink);
  font-weight: 700;
  text-align: right;
}

.esn_trust_block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.esn_trust_block li {
  margin: 0;
  padding: 0.38rem 0 0.38rem 1rem;
  border-top: none;
  position: relative;
}

.esn_trust_block li:first-child {
  border-top: none;
}

.esn_trust_block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--esn-gold);
}

.esn_trust_block .esn_policy_links {
  margin-top: 0.85rem;
}

.esn_license_block .cc_license_badge,
.esn_license_block img {
  max-width: 100%;
}

/* ---- Issue archive page ---- */

.page_issue_archive .pkp_structure_main > h1 {
  display: none;
}

.esn_archive_intro {
  margin: 0 0 2rem;
  padding: 0 0 1.35rem;
}

.esn_archive_kicker {
  margin-bottom: 0.45rem;
  color: var(--esn-teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
}

.esn_archive_intro h1 {
  margin: 0;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.55rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

.esn_archive_intro h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--esn-gold);
}

.esn_archive_intro p {
  max-width: 46rem;
  margin: 0.9rem 0 0;
  color: var(--esn-ink-light);
  font-size: 1rem;
  line-height: 1.6;
}

.esn_archive_stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0;
  margin-top: 0.9rem;
  color: var(--esn-ink-light);
  font-size: 0.9rem;
}

.esn_archive_stats span:not(:last-child)::after,
.esn_archive_issue_meta span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.75rem;
  border-radius: 50%;
  background: var(--esn-gold);
  vertical-align: middle;
}

.esn_archive_year_group h2 {
  margin: 0 0 0.95rem;
  padding: 0;
  border: none;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.55rem;
  line-height: 1.25;
}

.esn_issues_archive {
  list-style: none;
  margin: 0;
  padding: 0;
}

.esn_issues_archive > li {
  margin: 0 0 1.35rem;
}

.esn_archive_issue {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  padding: 1rem 1.15rem;
  background: var(--esn-wash);
  box-shadow: inset 3px 0 0 rgba(181, 139, 43, 0.45);
}

.esn_archive_issue .cover {
  display: block;
  width: 168px;
  float: none;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.esn_archive_issue .cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14);
}

.esn_archive_issue_body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.esn_archive_issue_kicker {
  margin: 0.15rem 0 0.35rem;
  color: var(--esn-teal-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.esn_archive_issue h3 {
  margin: 0;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.7rem;
  line-height: 1.18;
}

.esn_archive_issue h3 a {
  color: var(--esn-ink);
  text-decoration: none;
}

.esn_archive_issue h3 a:hover,
.esn_archive_issue h3 a:focus {
  color: var(--esn-blue);
}

.esn_archive_issue_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin-top: 0.65rem;
  color: var(--esn-ink-light);
  font-size: 0.92rem;
}

.esn_archive_issue .description {
  max-width: 44rem;
  margin-top: 0.85rem;
  color: var(--esn-text);
  line-height: 1.6;
}

.esn_archive_issue_tools {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
  margin-top: 1rem;
}

.esn_archive_issue_tools a {
  color: var(--esn-blue);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 767px) {
  .esn_archive_intro {
    margin-bottom: 1.35rem;
  }

  .esn_archive_intro h1 {
    font-size: 2rem;
  }

  .esn_archive_issue {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.9rem 1rem;
    padding: 0.85rem;
  }

  .esn_archive_issue .cover {
    width: 112px;
  }

  .esn_archive_issue h3 {
    font-size: 1.25rem;
  }

  .esn_archive_issue_kicker {
    font-size: 0.68rem;
  }

  .esn_archive_issue_meta {
    font-size: 0.84rem;
  }

  .esn_archive_issue .description,
  .esn_archive_issue_tools {
    grid-column: 1 / -1;
  }
}

/* Lighter global footer: the article page now carries trust signals in the
   utility rail, so the footer should feel like supporting infrastructure,
   not a second masthead competing with the article. */
.pkp_structure_footer_wrapper {
  background: #f7f7f4;
}

.pkp_structure_footer_wrapper .pkp_structure_footer {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pkp_structure_footer_wrapper .pkp_footer_content {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--esn-ink-light);
}

@media (max-width: 767px) {
  .esn_homepage_info {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1.35rem;
  }

  .esn_standards_card {
    display: block;
    padding: 0.95rem;
  }

  .esn_standards_card .esn_info_kicker {
    margin-bottom: 0.55rem;
  }

  .esn_standards_card .esn_policy_links {
    margin-top: 0.85rem;
  }

  .esn_author_resources {
    align-items: stretch;
    flex-direction: column;
  }

  .esn_template_download {
    width: 100%;
  }

  .esn_info_card {
    padding-left: 0.9rem;
  }

  .esn_home_issue_layout {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.9rem 1rem;
    padding: 0.85rem;
  }

  .esn_home_issue_cover {
    width: 112px;
  }

  .esn_home_issue_body h3 {
    font-size: 1.25rem;
  }

  .esn_home_issue_meta {
    font-size: 0.84rem;
  }

  .esn_home_issue_articles_header {
    margin-top: 1rem;
  }

  .page_index_journal .esn_home_issue_articles .obj_article_summary.esn_article_row .title,
  .page_index_journal .esn_home_issue_articles .obj_article_summary.esn_article_row .title a {
    font-size: 1.2rem;
  }

  .page_index_journal .esn_home_issue_articles .obj_article_summary.esn_article_row {
    padding: 0.95rem;
  }

  .page_index_journal .esn_home_issue_articles .esn_article_kicker {
    gap: 0.35rem;
  }

  .page_index_journal .esn_home_issue_articles .galleys_links {
    gap: 0.75rem;
  }

  .esn_home_section_header {
    display: block;
  }

  .esn_home_section_header > a {
    margin-top: 0.7rem;
  }

  .esn_news_row {
    display: block;
    padding: 0.9rem;
  }

  .esn_news_row h3 {
    font-size: 1.2rem;
  }

  .esn_news_row .summary,
  .esn_news_row .read_more {
    margin-top: 0.6rem;
  }

  .esn_utility_bar_inner {
    padding: 0.45rem 0.9rem;
    gap: 0.65rem;
  }

  .esn_utility_logo {
    height: 42px;
  }

  .esn_utility_brand span {
    font-size: 0.82rem;
  }

  .esn_utility_right {
    gap: 0.8rem;
  }

  .esn_utility_links {
    gap: 0.8rem;
  }

  .esn_utility_links a {
    font-size: 0.78rem;
  }

  .pkp_site_name_wrapper {
    height: auto !important;
    min-height: 4.2rem;
    padding: 0.75rem 0.9rem 0.8rem 3.6rem;
    overflow: visible;
  }

  .pkp_site_name_wrapper.has_esn_cover {
    display: block;
  }

  .pkp_site_nav_toggle {
    top: 1.05rem;
    left: 0.85rem;
    z-index: 3;
  }

  .esn_cover_thumb {
    display: none;
  }

  .pkp_site_name .is_text,
  .pkp_site_name > a {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.98rem;
    line-height: 1.2;
  }

  .esn_open_access {
    font-size: 0.78rem;
  }

  .page_article .obj_article_details.esn_article_details {
    font-size: 1rem;
  }

  .esn_article_header {
    padding: 1.35rem 0 1.15rem;
  }

  .page_article .esn_article_title {
    font-size: 2rem;
    line-height: 1.12;
  }

  .esn_article_header_meta,
  .esn_article_kicker {
    font-size: 0.82rem;
  }

  .esn_article_actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .esn_article_actions a {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .esn_article_jump_nav {
    position: static;
    gap: 0.85rem;
    margin-bottom: 1.35rem;
  }

  .page_article .esn_article_layout {
    display: block;
  }

  .page_article .esn_article_main {
    max-width: none;
  }

  .page_article .esn_article_main p,
  .page_article .esn_article_main li,
  .page_article .esn_article_main dd {
    font-size: 1rem;
    line-height: 1.65;
  }

  .esn_article_tools_panel {
    margin-top: 2rem;
    padding-left: 0;
    border-left: none;
    border-top: none;
  }

  .esn_article_tools_inner {
    position: static;
    padding: 1rem;
  }

  .esn_metrics_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pkp_structure_main img,
.pkp_structure_main table {
  max-width: 100%;
}

/* ---- Footer ---- */

.pkp_structure_footer_wrapper {
  background: var(--esn-muted);
  border-top: 1px solid var(--esn-border);
}

.pkp_brand_footer {
  opacity: 0.85;
}

/* "On this page" quick-nav (Journal Settings > Masthead > "About the
   Journal" rich-text field — that single field packs 8 distinct policy
   topics onto one page with no native table of contents; this jump-list
   plus the id="..." anchors added to each of that field's own <h2>
   headings make the page actually navigable instead of a long scroll). */
.esn_about_toc {
  background: var(--esn-muted);
  border: 1px solid var(--esn-border);
  border-radius: 3px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.esn_about_toc p {
  margin: 0 0 0.5rem;
  color: var(--esn-ink);
}

.esn_about_toc ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}

.esn_about_toc li {
  margin: 0 0 0.35rem;
  break-inside: avoid;
}

.esn_about_toc a {
  font-size: 0.95rem;
}

/* "For Authors / For Editors / For Reviewers" resource columns, entered
   via the native Page Footer field (Settings > Website > Setup) — real
   links to existing guideline/policy pages, matching the equivalent
   footer resource columns on the reference ScienceDirect page. */
.esn_footer_resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: left;
  margin-bottom: 1.5rem;
}

.esn_footer_col h3 {
  color: var(--esn-ink);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.esn_footer_col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.esn_footer_col li {
  margin-bottom: 0.4rem;
}

.esn_footer_copyright {
  text-align: center;
  color: var(--esn-ink-light);
  border-top: 1px solid var(--esn-border);
  padding-top: 1rem;
}

/* ---- Narrower sidebar ---- */
/* The parent theme reserves a fixed 300px (@sidebar-width) for
   .pkp_structure_sidebar regardless of how little it actually contains —
   on this journal that's just the "Make a Submission" button, leaving a
   lot of unused blank space. Shrink it to 80px and hand the freed 220px
   back to .pkp_structure_main at the same two breakpoints the parent
   theme itself uses, so the content column grows to fill it instead of
   leaving a gap. */
@media (min-width: 992px) {
  .pkp_structure_sidebar {
    width: 80px;
  }

  .pkp_structure_main {
    width: calc(952px - 80px);
  }
}

@media (min-width: 1200px) {
  .pkp_structure_main {
    width: calc(1160px - 80px);
  }
}

/* The parent theme draws two full-height 1px vertical divider lines here
   (its own ::before/::after — "full-height borders wrapping primary
   content column") — one at the content column's left edge, one at the
   main/sidebar boundary. Hidden per the user's request for a flatter,
   borderless look on every page. */
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none;
}

/* The parent theme's .pkp_block padding (@triple @double, ~30px/20px) and
   .cmp_button font-size/padding (1em font, 0 1em padding) were sized for
   the original 300px sidebar — at 80px they wrapped "Make a Submission"
   onto two lines. Tighten both so the phrase fits on one line instead. */
.pkp_block.block_make_submission {
  padding: 1rem 0.1rem;
}

/* The parent theme's own rule for this link is ".block_make_submission a"
   (one class + one type = higher specificity than a single class), so a
   plain ".block_make_submission_link" rule loses that fight and is
   silently ignored — qualify with the sidebar ancestor (two classes) to
   win regardless of source order. */
.pkp_structure_sidebar .block_make_submission_link {
  display: block;
  padding: 0.2rem 0.02rem;
  font-size: 0.5rem;
  text-align: center;
  white-space: nowrap;
}

/* ---- Standalone issue Table of Contents page ----
   Everything here is scoped under .page_issue, which only wraps the
   standalone issue page's markup (frontend/pages/issue.tpl) — the
   homepage's "Current Issue" widget shares the same underlying templates
   but takes the byte-identical-upstream {else} branch of the issue_toc.tpl
   override and sits inside .page_index_journal, so it is untouched by any
   rule below. See the override notes at the top of
   templates/frontend/objects/issue_toc.tpl and article_summary.tpl for
   the template-side half of this.

   Fourth pass (2026-07-09), building on the accepted third-pass "quiet
   editorial" register (no boxes, no pills, no buttons — typography,
   hairlines, and underlined text links only). This pass adds the
   top-journal issue-page anatomy the user picked from previewed options:
   a Nature/Cell-style left rail (issue cover, volume/number/date, ids,
   full-issue download, previous/next/all-issues navigation) beside the
   Table of Contents, serif display titles (the typographic signature of
   Nature/Cell/The Lancet — body and UI text stay sans), and per-article
   Cite/Share tools as native <details> popovers. */

/* Serif display face for titles only. */
.page_issue .pkp_structure_main h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: 2.45rem;
  line-height: 1.12;
  margin-bottom: 1.35rem;
}

.page_issue .pkp_structure_main h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--esn-gold);
}

/* Two-column layout: fixed left rail, fluid main column. */
.page_issue .obj_issue_toc .esn_issue_layout {
  display: flex;
  gap: 2.8rem;
  align-items: flex-start;
}

.page_issue .obj_issue_toc .esn_issue_rail {
  width: 205px;
  flex-shrink: 0;
  position: sticky;
  top: 1.5rem;
  padding: 1rem 1rem 1.15rem;
  background: var(--esn-wash);
  box-shadow: inset 3px 0 0 rgba(181, 139, 43, 0.45);
}

.page_issue .obj_issue_toc .esn_issue_main {
  flex: 1;
  min-width: 0;
  border-left: none;
  padding-left: 0;
}

/* Rail: cover */
.page_issue .obj_issue_toc .esn_issue_rail_cover {
  margin-bottom: 1rem;
}

.page_issue .obj_issue_toc .esn_issue_rail_cover img {
  display: block;
  width: 155px;
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14);
}

/* Rail: issue identification */
.page_issue .obj_issue_toc .esn_issue_rail_id {
  margin-bottom: 0.9rem;
}

.page_issue .obj_issue_toc .esn_issue_rail_journal {
  margin-bottom: 0.55rem;
  color: var(--esn-ink-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.page_issue .obj_issue_toc .esn_issue_rail_series {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--esn-ink);
}

.page_issue .obj_issue_toc .esn_issue_rail_date {
  font-size: 0.85rem;
  color: var(--esn-ink-light);
  margin-top: 0.15rem;
}

.page_issue .obj_issue_toc .esn_issue_rail_title {
  font-size: 0.85rem;
  color: var(--esn-ink-light);
  font-style: italic;
  margin-top: 0.15rem;
}

/* Rail: DOI / pub-ids */
.page_issue .obj_issue_toc .esn_issue_rail_pubid {
  font-size: 0.8rem;
  color: var(--esn-ink-light);
  margin-top: 0.35rem;
  overflow-wrap: break-word;
}

.page_issue .obj_issue_toc .esn_issue_rail_pubid .type {
  font-weight: 600;
  color: var(--esn-ink);
}

/* Rail: full-issue galley ("Download full issue"). The h2 inherits the
   site's global 1.4rem bordered heading — shrink it to a small caps
   kicker that fits the rail. */
.page_issue .obj_issue_toc .esn_issue_rail_galleys {
  margin-top: 1.1rem;
}

.page_issue .obj_issue_toc .esn_issue_rail_galleys h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--esn-ink-light);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 0.35rem;
}

.page_issue .obj_issue_toc .esn_issue_rail_galleys .galleys_links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page_issue .obj_issue_toc .esn_issue_rail_galleys .obj_galley_link {
  display: inline-block;
  background: none;
  border: none;
  border-bottom: 1px solid var(--esn-blue);
  color: var(--esn-blue);
  padding: 0 0 1px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.page_issue .obj_issue_toc .esn_issue_rail_galleys .obj_galley_link:hover {
  opacity: 0.65;
}

/* Rail: previous / next / all-issues navigation */
.page_issue .obj_issue_toc .esn_issue_rail_nav {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.page_issue .obj_issue_toc .esn_issue_rail_nav a {
  color: var(--esn-blue);
  text-decoration: none;
  font-weight: 600;
}

.page_issue .obj_issue_toc .esn_issue_rail_nav a:hover {
  color: var(--esn-blue-dark);
}

.page_issue .obj_issue_toc .esn_issue_nav_disabled {
  color: var(--esn-border);
}

/* Main column: issue description (when present) */
.page_issue .obj_issue_toc .esn_issue_main .description {
  color: var(--esn-text);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.page_issue .obj_issue_toc .esn_issue_intro {
  margin: 0 0 1.15rem;
  padding: 0;
  border-bottom: none;
}

.page_issue .obj_issue_toc .esn_issue_intro_kicker {
  margin-bottom: 0.45rem;
  color: var(--esn-teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
}

.page_issue .obj_issue_toc .esn_issue_intro h2 {
  margin: 0;
  padding: 0;
  border-bottom: none;
  color: var(--esn-ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

.page_issue .obj_issue_toc .esn_issue_intro h2::after {
  content: "";
  display: block;
  width: 2.8rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--esn-gold);
}

.page_issue .obj_issue_toc .esn_issue_intro p {
  margin: 0.85rem 0 0;
  color: var(--esn-ink-light);
  font-size: 0.92rem;
}

.page_issue .obj_issue_toc .esn_issue_intro p span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.75rem;
  border-radius: 50%;
  background: var(--esn-gold);
  vertical-align: middle;
}

/* ToC header: plain heading (inherits the site's own global h2 rule —
   1.4rem/700 with a 1px hairline underneath) with a small grey count
   line underneath. */
.page_issue .obj_issue_toc .esn_toc_header {
  margin-bottom: 0.55rem;
}

.page_issue .obj_issue_toc .esn_toc_header h2 {
  margin: 0 0 0.25rem;
  padding: 0;
  border-bottom: none;
}

.page_issue .obj_issue_toc .esn_toc_header .esn_toc_count {
  margin: 0;
  color: var(--esn-ink-light);
  font-size: 0.85rem;
}

/* Article list: a single stacked column with hairline row dividers, not
   the homepage's card grid — the extra .page_issue ancestor class
   outweighs the shared ".cmp_article_list.articles" grid rule in the
   "Article listings" section above under equal-specificity cascade
   rules. */
.page_issue .cmp_article_list.articles {
  display: block;
}

.page_issue .cmp_article_list.articles > li {
  border-bottom: none;
}

.page_issue .cmp_article_list.articles > li:last-child {
  border-bottom: none;
}

.page_issue .obj_article_summary.esn_article_row {
  height: auto;
  flex-direction: column;
  border: none;
  border-radius: 0;
  padding: 1.35rem 0 1.8rem;
}

.page_issue .obj_article_summary.esn_article_row:hover {
  border-color: transparent;
  box-shadow: none;
}

/* Section/type + Open Access kicker: thin grey uppercase text,
   middot-separated — the same register as a magazine's section rubric,
   not a colored badge. */
.esn_article_kicker {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--esn-ink-light);
  margin-bottom: 0.35rem;
}

.esn_article_kicker span:not(:last-child)::after {
  content: "·";
  margin: 0 0.6em;
  color: var(--esn-border);
}

/* Serif display titles for article entries (issue h1 handled above). */
.page_issue .obj_article_summary.esn_article_row .title,
.page_issue .obj_article_summary.esn_article_row .title a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.22;
}

.page_issue .obj_article_summary.esn_article_row .title {
  margin: 0 0 0.4rem;
}

/* Authors / pages / published date as one plain grey line. */
.page_issue .obj_article_summary.esn_article_row .meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--esn-ink-light);
  margin: 0 0 0.6rem;
}

.page_issue .obj_article_summary.esn_article_row .meta > div:not(:last-child)::after {
  content: "·";
  margin: 0 0.6em;
  color: var(--esn-border);
}

.esn_article_abstract {
  color: var(--esn-text);
  font-size: 1rem;
  margin: 0.75rem 0 0;
  max-width: 46rem;
  line-height: 1.65;
}

/* Keywords — a plain comma-separated line, same pattern
   article_details.tpl already uses for the full article page. */
.esn_article_keywords {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: var(--esn-ink-light);
}

.esn_keywords_label {
  color: var(--esn-ink-light);
  font-weight: 600;
  margin-right: 0.3rem;
}

.esn_article_doi {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--esn-ink-light);
}

.esn_article_doi .label {
  font-weight: 600;
  color: var(--esn-ink);
  margin-right: 0.25rem;
}

/* Actions: plain underlined text links, generously spaced — no button
   chrome anywhere on this page. */
.page_issue .obj_article_summary.esn_article_row .galleys_links {
  list-style: none;
  margin-top: 1.15rem;
  padding: 0;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* margin:0 kills the parent theme's own li spacing (margin-right on
   non-last, margin-top on non-first — meant for its non-flex button
   list), which otherwise pushes the second link ~5px below the first;
   see the 0.14.4 changelog entry for the full debugging writeup. */
.page_issue .obj_article_summary.esn_article_row .galleys_links li {
  display: flex;
  align-items: center;
  margin: 0;
}

.page_issue .obj_article_summary.esn_article_row .galleys_links a.obj_galley_link,
.page_issue .obj_article_summary.esn_article_row .galleys_links a.esn_view_article_link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  border-bottom: 1px solid var(--esn-blue);
  border-radius: 0;
  color: var(--esn-blue);
  padding: 0 0 1px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: opacity 0.15s ease;
}

.page_issue .obj_article_summary.esn_article_row .galleys_links a.obj_galley_link:hover,
.page_issue .obj_article_summary.esn_article_row .galleys_links a.esn_view_article_link:hover {
  opacity: 0.65;
}

/* Cite / Share: native <details> popovers styled to match the text-link
   actions — the summary looks exactly like the neighboring links, the
   panel is a small quiet card anchored below. No JS involved. */
.page_issue .obj_article_summary.esn_article_row .galleys_links .esn_tool_li {
  position: relative;
}

.esn_article_tool summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--esn-blue);
  border-bottom: 1px solid var(--esn-blue);
  padding-bottom: 1px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  transition: opacity 0.15s ease;
}

.esn_article_tool summary::-webkit-details-marker {
  display: none;
}

.esn_article_tool summary:hover {
  opacity: 0.65;
}

.esn_article_tool .esn_tool_panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 10;
  background: var(--esn-background);
  border: 1px solid var(--esn-border);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 0.9rem 1rem;
  width: 26rem;
  max-width: 78vw;
  font-size: 0.85rem;
}

.esn_citation_text {
  margin: 0;
  line-height: 1.6;
  color: var(--esn-text);
  overflow-wrap: break-word;
}

.esn_share_panel {
  width: auto;
  display: flex;
  gap: 1.25rem;
  white-space: nowrap;
}

.esn_share_panel a {
  color: var(--esn-blue);
  font-weight: 600;
  text-decoration: none;
}

.esn_share_panel a:hover {
  color: var(--esn-blue-dark);
}

@media (max-width: 767px) {
  .page_issue .obj_issue_toc .esn_issue_layout {
    flex-direction: column;
    gap: 1.15rem;
  }

  .page_issue .obj_issue_toc .esn_issue_rail {
    position: static;
    width: 100%;
    padding: 0.85rem;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.9rem 1rem;
    align-items: start;
  }

  .page_issue .obj_issue_toc .esn_issue_rail_cover img {
    width: 112px;
  }

  .page_issue .obj_issue_toc .esn_issue_rail_cover {
    margin-bottom: 0;
  }

  .page_issue .obj_issue_toc .esn_issue_rail_id {
    margin-bottom: 0;
  }

  .page_issue .obj_issue_toc .esn_issue_rail_nav,
  .page_issue .obj_issue_toc .esn_issue_rail_galleys,
  .page_issue .obj_issue_toc .esn_issue_rail_pubid {
    grid-column: 1 / -1;
  }

  .page_issue .obj_issue_toc .esn_issue_rail_nav {
    margin-top: 0.35rem;
    padding-top: 0;
    gap: 0.25rem;
  }

  .page_issue .obj_issue_toc .esn_issue_main {
    border-left: none;
    padding-left: 0;
  }

  .page_issue .obj_issue_toc .esn_issue_intro {
    margin-bottom: 1.2rem;
  }

  .page_issue .obj_issue_toc .esn_issue_intro h2 {
    font-size: 1.85rem;
  }

  .page_issue .obj_issue_toc .esn_toc_header {
    margin-top: 0.2rem;
  }

  .page_issue .obj_article_summary.esn_article_row {
    padding-top: 1rem;
  }

  .page_issue .obj_article_summary.esn_article_row .title,
  .page_issue .obj_article_summary.esn_article_row .title a {
    font-size: 1.32rem;
  }
}