/* ==========================================================================
   Liminalia: A Journal of Arts-Based Research
   MASTER JOURNAL STYLESHEET
   OJS 3.5 with Immersion stable-3_5_0

   Upload at: Settings > Website > Appearance > Advanced
              > Journal Style Sheet

   THIS FILE REPLACES ALL OF THE FOLLOWING. Delete them:
     any earlier Liminalia stylesheet
     any earlier journal stylesheet from another title
     any header image or masthead patch

   Companion settings:
     Journal Page Header Logo  ->  leave empty
     Homepage Image            ->  3558 x 463 Liminalia masthead artwork
     Journal Favicon           ->  square .ico or .png Liminalia mark

   Section 3 removes the generated title container because the Homepage Image
   already contains the complete journal name and subtitle.
   Section 13 is the print stylesheet.
   Section 4 strips pasted formatting out of the journal description block
   and suppresses the journal title if it is repeated there.

   Header stack, top to bottom:
     artwork band (full bleed) / yellow rule / masthead / navigation

   Keep the complete journal title in Settings > Journal > Masthead for
   metadata. The visual duplicate is hidden here because the Homepage Image
   already contains the complete wordmark.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Fonts
   EB Garamond for the reading and display voice, Archivo for navigation,
   labels, metadata and buttons. Both are the families used in the masthead
   artwork, so the site and the logo agree.

   These load from Google. To avoid sending reader IP addresses to Google,
   delete this @import, put the woff2 files in public/site/, and swap in an
   @font-face block pointing at them.
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..700;1,400..600&family=Archivo:wght@400;500;600;700&display=swap');


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette. The yellow is the tape line running across the cover artwork. */
  --liminalia-paper:     #FFFFFF;   /* white site ground */
  --liminalia-cream:     #FFFFFF;   /* white secondary surface */
  --liminalia-charcoal:  #211f20;
  --liminalia-yellow:    #c8b94d;
  --liminalia-graphite:  #5b5859;
  --liminalia-rule:      #e2e2e2;

  /* Type */
  --liminalia-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --liminalia-body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --liminalia-ui:      'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Scale. EB Garamond runs small at a given size, so the body is set a
     little larger than a sans would be. */
  --liminalia-s:   0.875rem;
  --liminalia-b:   1.1875rem;
  --liminalia-m:   1.5rem;
  --liminalia-l:   1.95rem;
  --liminalia-xl:  2.75rem;
}


/* --------------------------------------------------------------------------
   2. Foundations
   -------------------------------------------------------------------------- */

html,
body {
  background-color: #fff !important;
  color: var(--liminalia-charcoal);
  font-family: var(--liminalia-body);
  font-size: var(--liminalia-b);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* White base surfaces across the public site. */
.main-header,
.main-header__nav,
.main__content,
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.page,
.issue,
.issue__header,
.issue-desc,
.issue-section,
main + aside,
.additional-home-content {
  background-color: #fff !important;
}

/* Override section colours saved on individual Immersion issues so the issue
   table of contents remains white as well. */
.issue-section.section_dark,
.issue-section.section_dark h2,
.issue-section.section_dark h3,
.issue-section.section_dark h4,
.issue-section.section_dark p,
.issue-section.section_dark a,
.issue-section.section_dark .issue-section__desc,
.issue-section.section_dark .article__meta {
  background-color: #fff !important;
  color: var(--liminalia-charcoal) !important;
}

[class*="article__abstract-fadeout-"]::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%) !important;
}

h1, h2, h3, h4 {
  font-family: var(--liminalia-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.16;
  color: var(--liminalia-charcoal);
}

/* Charcoal text with a yellow underline. Yellow text would fail contrast on
   this ground; yellow as the underline keeps the accent and the legibility. */
a {
  color: var(--liminalia-charcoal);
  text-decoration-color: var(--liminalia-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus {
  color: var(--liminalia-graphite);
  text-decoration-color: var(--liminalia-yellow);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--liminalia-yellow);
  outline-offset: 3px;
}

/* Keep standard OJS information pages comfortably below the navigation
   without leaving them stranded in the vertical centre of the screen. */
.page.page_privacy,
.page.page_submissions,
.page.page_about {
  padding-top: 3rem !important;
  padding-bottom: 4rem !important;
}


/* --------------------------------------------------------------------------
   3. Header: artwork band, masthead, navigation
   Use the original short masthead band from the first setup. The replacement
   image is centred on its two text lines within that band.
   -------------------------------------------------------------------------- */

#immersion_content_header {
  min-height: 0;
  position: relative;
  background-color: rgb(255, 255, 255) !important;
  /* Centre the uploaded Homepage Image in both directions within the
     masthead band. Size by height so the complete wordmark remains visible. */
  background-size: auto 7.7vw !important;
  background-position: center center;
  background-repeat: no-repeat;
}

#immersion_content_header > .container-fluid {
  background-color: transparent !important;
}

#immersion_content_header .main-header__admin,
#immersion_content_header .navbar,
#immersion_content_header .navbar-collapse,
#immersion_content_header #main-menu {
  background-color: rgb(255, 255, 255) !important;
}

#immersion_content_header::before {
  content: '';
  display: block;
  width: 100%;
  /* Crop only the unused white space below the enlarged artwork. */
  height: 15.25vw;
  aspect-ratio: auto;
  border-bottom: 0 !important;
}

/* Immersion's dark scrim is unnecessary once the title is off the artwork,
   and it would muddy charcoal marks on white paper. */
#immersion_content_header::after { display: none; }

/* Centre an uploaded Journal Page Header Logo in the masthead band. The link
   has zero font size so OJS cannot display a plain-text title fallback. */
.page_index:not(.indexSite) #immersion_content_header .main-header__title,
#immersion_content_header .main-header__title {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 10;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  height: 15.25vw !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  background: transparent !important;
  pointer-events: none;
}

#immersion_content_header .main-header__title a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  pointer-events: auto;
}

/* Short yellow rule aligned to the subtitle in the Homepage Image. OJS loads
   that image as the header background, so the rule belongs to the masthead
   container rather than to an image link. */
#immersion_content_header .main-header__title::after {
  content: '';
  position: absolute;
  /* The subtitle is baked into the Homepage Image. Place the rule just below
     that subtitle, rather than between it and the journal name. */
  top: 96%;
  left: 50%;
  width: 26.2vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--liminalia-yellow);
  pointer-events: none;
}

#immersion_content_header .main-header__title img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 78vw !important;
  max-height: 13vw !important;
  margin: auto !important;
  object-fit: contain;
  /* Reduce the complete title and subtitle image while keeping it centred. */
  transform: scale(0.7) !important;
  transform-origin: center center;
}

.main-header {
  padding-top: 0;
  padding-bottom: 0;
}

#immersion_content_header .main-header__nav {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  transform: none;
  margin-bottom: 0 !important;
  z-index: 20;
  border-top: 0;
  border-bottom: 0 !important;
  background-color: #fff !important;
}

/* Immersion adds extra vertical space to the navigation's inner wrappers.
   Remove it so Current, Archives and About sit directly below the masthead. */
#immersion_content_header .main-header__nav .navbar,
#immersion_content_header .main-header__nav .navbar-collapse,
#immersion_content_header .main-header__nav #main-menu,
#immersion_content_header .main-header__nav #navigationPrimary {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Use a separate editorial navigation row beneath the masthead. */
#immersion_content_header .main-header__nav .navbar-collapse {
  justify-content: center !important;
}

#immersion_content_header .main-header__nav #navigationPrimary {
  display: flex !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the signed-in account control out of the bottom-right corner. */
#immersion_content_header .main-header__admin {
  position: absolute !important;
  top: 1rem;
  right: 1.5rem;
  bottom: auto;
  left: auto;
  z-index: 30;
}

/* Keep the signed-in administration and language controls within the white
   header instead of allowing Immersion's black default blocks to appear. */
.main-header__admin-link,
.main-header__lang-link,
#navigationPrimary .dropdown-menu,
#navigationPrimary .dropdown-menu.show {
  background-color: #fff !important;
  color: var(--liminalia-charcoal) !important;
}

.main-header__nav .nav-link,
.main-header__nav a {
  font-family: var(--liminalia-ui);
  font-size: var(--liminalia-s);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--liminalia-graphite);
  text-decoration: none;
}

.main-header__nav a:hover,
.main-header__nav > li > a[aria-current="page"] {
  color: var(--liminalia-charcoal);
  border-color: var(--liminalia-yellow);
}

.hamburger__icon,
.navbar-toggler { color: var(--liminalia-charcoal); }


/* --------------------------------------------------------------------------
   4. Journal description
   -------------------------------------------------------------------------- */

.journal-description {
  padding: 5rem 0;
  background-color: #fff !important;
  color: var(--liminalia-charcoal) !important;
}

.journal-description.section_dark,
.journal-description.section_dark p,
.journal-description.section_dark h2,
.journal-description.section_dark h3,
.journal-description.section_dark a {
  color: var(--liminalia-charcoal) !important;
}

.journal-description p {
  font-size: var(--liminalia-m);
  line-height: 1.48;
  max-width: 38ch;
}

/* --- cleaning up pasted description content ----------------------------
   The description field is edited through a rich-text box, so content pasted
   from Word arrives carrying inline styles: white highlight backgrounds,
   centred alignment, hard-coded fonts and colours. These rules strip that
   back so the block obeys the stylesheet. Editing the field itself is the
   better fix; this is the safety net.
   ---------------------------------------------------------------------- */

.journal-description *,
.additional-home-content * {
  background-color: transparent !important;
  font-family: inherit !important;
  color: inherit !important;
}

.journal-description,
.journal-description p,
.journal-description div,
.additional-home-content,
.additional-home-content p {
  text-align: left !important;
}

/* The journal title repeated as the first heading of the description. The
   masthead already carries it, so it is suppressed here. Remove this rule if
   you clear the line out of the description field instead. */
.journal-description > .container-fluid > h1:first-child,
.journal-description h1:first-child,
.journal-description h2:first-child,
.journal-description p:first-child > strong:only-child {
  display: none;
}

/* Any remaining headings inside the description sit in the display face at a
   size that does not compete with the masthead. */
.journal-description h1,
.journal-description h2,
.journal-description h3 {
  font-family: var(--liminalia-display) !important;
  font-size: var(--liminalia-m);
  font-weight: 500;
  margin: 0 0 0.6rem;
  max-width: 38ch;
}

/* Immersion adds .section_dark itself when it measures a dark background. */
.section_dark,
.section_dark p,
.section_dark h2 { color: var(--liminalia-paper); }

.section_dark a {
  color: var(--liminalia-paper);
  text-decoration-color: var(--liminalia-yellow);
}


/* --------------------------------------------------------------------------
   5. Section plates
   -------------------------------------------------------------------------- */

.issue-section__header { padding: 3rem 0 1.4rem; }

.issue-section__title {
  font-size: var(--liminalia-xl);
  font-weight: 500;
  margin: 0;
}

.issue-section__title::before {
  content: 'section';
  display: block;
  font-family: var(--liminalia-ui);
  font-size: var(--liminalia-s);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--liminalia-graphite);
  margin-bottom: 0.8rem;
}

.section_dark .issue-section__title::before { color: var(--liminalia-yellow); }

.issue-section__desc {
  font-size: var(--liminalia-b);
  max-width: 56ch;
  color: var(--liminalia-graphite);
  margin-top: 1rem;
}

.section_dark .issue-section__desc { color: rgba(255,255,255,0.82); }


/* --------------------------------------------------------------------------
   6. Article rows
   -------------------------------------------------------------------------- */

.issue-section__toc-item,
.article {
  border-top: 1px solid var(--liminalia-yellow);
  padding: 1.5rem 0 1.5rem 1.25rem;
  margin-left: -1.25rem;
  border-left: 3px solid transparent;
  transition: border-left-color 180ms ease, padding-left 180ms ease;
}

.issue-section__toc-item:hover,
.article:hover {
  border-left-color: var(--liminalia-yellow);
  padding-left: 1.7rem;
}

.article__title {
  font-family: var(--liminalia-display);
  font-size: var(--liminalia-l);
  font-weight: 500;
  margin: 0 0 0.45rem;
  max-width: 48ch;
}

.article__title a {
  color: var(--liminalia-charcoal);
  text-decoration: none;
}

.article__title a:hover {
  color: var(--liminalia-graphite);
  text-decoration: underline;
  text-decoration-color: var(--liminalia-yellow);
}

/* Identifiers, dates, pagination, galley formats: machine-written content,
   set in the UI face rather than the reading face. */
.article__meta,
.issue__doi,
.issue__volume,
.issue__number,
.article__btn-group .file,
.issue-desc__galleys,
.announcement__date {
  font-family: var(--liminalia-ui);
  font-size: var(--liminalia-s);
  letter-spacing: 0.04em;
  color: var(--liminalia-graphite);
}

/* Immersion's own tooltip points at this class for the partial-abstract
   height, used when "Show partial abstracts" is selected. */
.article__abstract-fade { height: 100px; }


/* --------------------------------------------------------------------------
   7. Issue header and announcements
   -------------------------------------------------------------------------- */

.issue__header,
.issue-desc__title { margin-bottom: 1.2rem; }

.issue__title {
  font-size: var(--liminalia-xl);
  font-weight: 500;
}

.announcements {
  padding: 4rem 0;
  background-color: #fff !important;
  color: var(--liminalia-charcoal) !important;
}

.announcements.section_dark,
.announcements.section_dark p,
.announcements.section_dark h2,
.announcements.section_dark h3,
.announcements.section_dark h4,
.announcements.section_dark a {
  color: var(--liminalia-charcoal) !important;
}

.announcement__title {
  font-family: var(--liminalia-display);
  font-size: var(--liminalia-m);
  font-weight: 500;
}

.announcement-section__toc {
  list-style: none;
  padding-left: 0;
}

.page_issue_archive .issues_archive > li { border-color: var(--liminalia-yellow); }


/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn,
.btn-primary,
.cmp_button,
.cmp_form .buttons button,
button.submit,
input[type="submit"] {
  font-family: var(--liminalia-ui);
  font-size: var(--liminalia-s);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0.7rem 1.4rem;
  background: var(--liminalia-charcoal);
  border: 1px solid var(--liminalia-charcoal);
  color: var(--liminalia-paper);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn:hover,
.btn-primary:hover,
.cmp_button:hover,
.cmp_form .buttons button:hover,
button.submit:hover,
input[type="submit"]:hover {
  background: var(--liminalia-yellow);
  border-color: var(--liminalia-yellow);
  color: var(--liminalia-charcoal);
}

.section_dark .btn {
  background: transparent;
  border-color: var(--liminalia-yellow);
  color: var(--liminalia-paper);
}

.section_dark .btn:hover {
  background: var(--liminalia-yellow);
  color: var(--liminalia-charcoal);
}

/* The journal description and announcement panels are forced to white even
   if their saved Immersion colour still marks them as section_dark. */
.journal-description.section_dark .btn,
.announcements.section_dark .btn,
.issue-section.section_dark .btn {
  background: var(--liminalia-charcoal);
  border-color: var(--liminalia-charcoal);
  color: #fff !important;
}

.journal-description.section_dark .btn:hover,
.announcements.section_dark .btn:hover,
.issue-section.section_dark .btn:hover {
  background: var(--liminalia-yellow);
  border-color: var(--liminalia-yellow);
  color: var(--liminalia-charcoal) !important;
}


/* --------------------------------------------------------------------------
   9. Sidebar and footer
   -------------------------------------------------------------------------- */

.sidebar_wrapper h2,
.sidebar_wrapper h3 {
  font-family: var(--liminalia-ui);
  font-size: var(--liminalia-s);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--liminalia-graphite);
}

.main-footer,
.pkp_structure_footer,
.pkp_footer_content {
  background: #fff !important;
  color: var(--liminalia-charcoal) !important;
  border-top: 0 !important;
  padding: 3.5rem 0 2.25rem;
  font-family: var(--liminalia-ui);
  font-size: var(--liminalia-s);
}

/* Immersion's footer contains its own <hr>. Keep the footer edge clear and
   recolour that existing lower divider instead. */
.main-footer {
  border-top: 0 !important;
}

#immersion_content_footer hr {
  border: 0 !important;
  border-top: 1px solid var(--liminalia-yellow) !important;
  opacity: 1 !important;
}

.main-footer a,
.pkp_structure_footer a,
.pkp_footer_content a {
  color: var(--liminalia-charcoal) !important;
  text-decoration-color: var(--liminalia-yellow);
}


/* --------------------------------------------------------------------------
   10. Article reading page
   -------------------------------------------------------------------------- */

.obj_article_details .main_entry,
.article_details .main_entry { max-width: 66ch; }

.obj_article_details .abstract p {
  font-size: var(--liminalia-m);
  line-height: 1.5;
}

.obj_issue_toc .section,
.obj_article_summary { border-color: var(--liminalia-yellow); }


/* --------------------------------------------------------------------------
   10a. Homepage current issue list
   A compact contents-page layout: ruled section labels, article title,
   authors, right-aligned pages and a separate outlined galley button.
   -------------------------------------------------------------------------- */

.page_index_journal .issue-section {
  padding: 0;
  background: #fff;
}

.page_index_journal .issue-section__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 0 1.35rem;
}

.page_index_journal .issue-section__header::before,
.page_index_journal .issue-section__header::after {
  content: '';
  height: 1px;
  background: var(--liminalia-rule);
}

.page_index_journal .issue-section__header::before {
  flex: 0 0 1.5rem;
}

.page_index_journal .issue-section__header::after {
  flex: 1 1 auto;
}

.page_index_journal .issue-section__title {
  flex: 0 0 auto;
  font-family: var(--liminalia-ui);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--liminalia-graphite);
  white-space: nowrap;
}

.page_index_journal .issue-section__title::before {
  content: none;
  display: none;
}

.page_index_journal .issue-section__toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page_index_journal .issue-section__toc-item,
.page_index_journal .article {
  position: relative;
  margin: 0;
  padding: 1.15rem 5rem 1.6rem 1.5rem;
  border: 0;
  transition: none;
}

.page_index_journal .issue-section__toc-item:hover,
.page_index_journal .article:hover {
  padding-left: 1.5rem;
  border-left-color: transparent;
}

.page_index_journal .article__title {
  max-width: none;
  margin: 0 0 0.25rem;
  font-family: var(--liminalia-ui);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.page_index_journal .article__title a {
  color: #746a1f;
}

.page_index_journal .article__title a:hover {
  color: var(--liminalia-charcoal);
  text-decoration-color: var(--liminalia-yellow);
}

.page_index_journal .article__authors {
  margin: 0 0 0.65rem;
  font-family: var(--liminalia-ui);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--liminalia-charcoal);
}

.page_index_journal .article__pages {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--liminalia-ui);
  font-size: 0.9rem;
  color: var(--liminalia-graphite);
}

.page_index_journal .article__btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
}

.page_index_journal .article__btn-group .file,
.page_index_journal .article__btn-group a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--liminalia-yellow);
  border-radius: 3px;
  background: #fff;
  color: #746a1f !important;
  font-family: var(--liminalia-ui);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.page_index_journal .article__btn-group .file:hover,
.page_index_journal .article__btn-group a:hover {
  background: var(--liminalia-yellow);
  border-color: var(--liminalia-yellow);
  color: var(--liminalia-charcoal) !important;
}


/* --------------------------------------------------------------------------
   11. Default theme fallbacks
   Inert under Immersion, retained so the palette survives a theme switch.
   -------------------------------------------------------------------------- */

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main {
  background-color: var(--liminalia-paper);
  color: var(--liminalia-charcoal);
}

.pkp_navigation_primary a,
.pkp_navigation_user a { color: var(--liminalia-charcoal); }

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-current="page"] {
  border-color: var(--liminalia-yellow);
}


/* --------------------------------------------------------------------------
   12. Responsive and reduced motion
   -------------------------------------------------------------------------- */

/* Final Immersion 3.5 header override. The added specificity and !important
   flags prevent the theme's viewport-positioned navigation from placing the
   links back over the masthead. */
html body #immersion_content_header .main-header__nav {
  position: absolute !important;
  top: calc(15.25vw + 0.25rem) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.625rem 0 !important;
  transform: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: #fff !important;
}

/* Reserve real document space for the separate navigation row. */
html body #immersion_content_header {
  padding-bottom: 4rem !important;
  border-bottom: 0 !important;
}

html body #immersion_content_header .main-header__nav .navbar-collapse {
  justify-content: center !important;
}

html body #immersion_content_header .main-header__nav #navigationPrimary {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

@media (max-width: 767px) {
  /* Show the full two-line masthead on a compact mobile band. */
  #immersion_content_header {
    background-size: auto 63px !important;
    background-position: center center;
    padding-bottom: 0 !important;
  }
  #immersion_content_header::before {
    aspect-ratio: auto;
    height: 160px;
  }

  .page_index:not(.indexSite) #immersion_content_header .main-header__title,
  #immersion_content_header .main-header__title {
    height: 160px !important;
  }

  #immersion_content_header .main-header__title img {
    max-width: 90vw !important;
    max-height: 135px !important;
  }

  #immersion_content_header .main-header__title::after {
    top: 96%;
    width: min(211px, 69vw);
  }

  /* Keep the collapsed mobile navigation in normal document flow. */
  html body #immersion_content_header .main-header__nav {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    transform: none !important;
    background-color: #fff !important;
  }

  #immersion_content_header .main-header__nav #navigationPrimary {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #immersion_content_header .main-header__admin {
    position: relative !important;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .main-header { padding-top: 0; }

  .journal-description { padding: 3rem 0; }
  .journal-description p { max-width: 100%; font-size: 1.3rem; }

  .issue-section__title { font-size: 1.95rem; }
  .article__title { font-size: 1.45rem; }

  .page_index_journal .issue-section__toc-item,
  .page_index_journal .article {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .page_index_journal .issue-section__toc-item:hover,
  .page_index_journal .article:hover {
    padding-left: 1rem;
  }

  .page_index_journal .article__pages {
    position: static;
    display: block;
    margin: 0.2rem 0 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* --------------------------------------------------------------------------
   13. Print
   Drops the masthead, artwork band, navigation, sidebar and footer from paper.
   Without this the artwork band eats roughly a third of the first sheet and a
   good deal of toner. Links print with their text rather than as blue.
   -------------------------------------------------------------------------- */

@media print {
  #immersion_content_header,
  .main-header,
  .main-header__nav,
  .main-header__admin,
  .main-footer,
  .pkp_structure_footer,
  .sidebar_wrapper,
  .article__btn-group,
  .cmp_skip_to_content { display: none; }

  html,
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  /* Expose destinations for external links only, so printed references are
     followable. Internal fragments and mailto are left alone. */
  .obj_article_details a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--liminalia-ui);
    font-size: 8.5pt;
    word-break: break-all;
  }

  .obj_article_details .main_entry { max-width: none; }

  .issue-section__toc-item,
  .article {
    border-top: 1px solid #999;
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
    break-inside: avoid;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
    color: #000;
  }

  .article__abstract-fade { height: auto; }
}