/* ========================================================================
   J-HyTEL stylesheet
   v2.2.0 Jul 22 2026 — full consolidated spacing revision
   (c) 2024 Agariadne Dwinggo Samala <mail@agariadne@ft.unp.ac.id>
         
  
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation, either version 3 of the License, or
   (at your option) any later version.
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <https://www.gnu.org/licenses/>.

   ------------------------------------------------------------------------
     
   Table of contents 

   1.......Typography
   2.......Global
   2.1.....Body
   2.2.....Header
   2.3.....Navbar
   2.4.....Footer
   3.......Styling
   3.1.....Buttons
   3.2.....Forms
   3.3.....Paragraphs
   3.4.....Tooltips
   3.5.....Page headers
   4.......Page-specific
   4.1.....Homepage
   4.1.1...Homepage issue
   4.1.2...Homepage table of contents
   4.1.3...Introduction
   4.1.4...Homepage announcements
   4.2.....Issue table of contents
   4.3.....Individual articles
   4.4.....All custom pages
   4.5.....Contact page
   4.6.....Submissions page
   4.7.....FAQ page
   4.8.....Search page
   4.9.....Editorial team
   4.10....Announcements
   4.11....Archives

   ======================================================================== */
@font-face {
  font-family: "Perpetua";
  src:
    url("/PATH-FONT/perpetua.woff2") format("woff2"),
    url("/PATH-FONT/perpetua.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Perpetua";
  src:
    url("/PATH-FONT/perpetua-italic.woff2") format("woff2"),
    url("/PATH-FONT/perpetua-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400&family=Lora:ital@0;1&display=swap");

/* 0. Slider */
/*
 * Professional article summary cards for OJS 3.3.0-13
 * Pair this stylesheet with the custom article_summary.tpl.
 */

/* =========================================================
   ARTICLE AUTHOR TOOLTIP — OJS 3.3

   - Warna dan hover nama author mengikuti CSS jurnal.
   - Tooltip mengikuti nama yang sedang di-hover pada desktop.
   - Tooltip responsif pada layar kecil.
   - Tidak menggunakan scrollbar.
   - Ikon menggunakan SVG/CSS internal tanpa server eksternal.
   ========================================================= */

/* ---------- Author list ---------- */

.article-author-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.article-author-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  min-width: 0;
}

.article-author-item {
  position: relative;
  display: inline-block;
}

/* Tidak mengatur color atau hover agar mengikuti tema jurnal. */
.article-author-name {
  font-weight: 700;
  font-family: "Perpetua";
  font-weight: 300;
  font-size: 20px;
  font-variant: unicase;
  font-style: italic;
}

.article-author-item sup {
  margin-left: 2px;
  font-size: 0.7em;
}

.article-author-separator {
  margin-right: 2px;
}

/* ---------- Biography tooltip ---------- */

.article-author-tooltip {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 50%;

  display: block;
  visibility: hidden;
  width: min(440px, calc(100vw - 32px));
  max-width: min(440px, calc(100vw - 32px));
  height: auto;
  max-height: none;
  padding: 18px 20px;
  overflow: visible;

  color: #fff;
  background: linear-gradient(145deg, #59174d 0%, #35122f 100%);
  border: 1px solid #a85fba;
  border-top: 3px solid #e311ff;
  border-radius: 12px;
  box-shadow:
    0 18px 40px rgba(53, 18, 47, 0.3),
    0 4px 12px rgba(53, 18, 47, 0.18);

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.52;
  text-align: left;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;

  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
}

/* Segitiga penunjuk ke nama author. */
.article-author-tooltip::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #59174d;
  border-top: 1px solid #a85fba;
  border-left: 1px solid #a85fba;
  transform: translateX(-50%) rotate(45deg);
}

.article-author-item:hover .article-author-tooltip,
.article-author-item:focus-within .article-author-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Author pertama: tooltip tidak keluar dari sisi kiri. */
.article-author-item:first-child .article-author-tooltip {
  left: 0;
  transform: translate(0, -4px);
}

.article-author-item:first-child:hover .article-author-tooltip,
.article-author-item:first-child:focus-within .article-author-tooltip {
  transform: translate(0, 0);
}

.article-author-item:first-child .article-author-tooltip::before {
  left: 22px;
  transform: rotate(45deg);
}

/* Author terakhir: tooltip tidak keluar dari sisi kanan. */
.article-author-item:last-child .article-author-tooltip {
  right: 0;
  left: auto;
  transform: translate(0, -4px);
}

.article-author-item:last-child:hover .article-author-tooltip,
.article-author-item:last-child:focus-within .article-author-tooltip {
  transform: translate(0, 0);
}

.article-author-item:last-child .article-author-tooltip::before {
  right: 22px;
  left: auto;
  transform: rotate(45deg);
}

/* ---------- Tooltip content ---------- */

.article-author-tooltip-name,
.article-author-tooltip-affiliation,
.article-author-tooltip-bio,
.article-author-tooltip-empty,
.article-author-tooltip-hint {
  display: block;
}

.article-author-tooltip-name {
  margin-bottom: 5px;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.article-author-tooltip-affiliation {
  margin-bottom: 8px;
  color: #ead9ef;
  font-size: 13.5px;
  line-height: 1.42;
}

.article-author-tooltip-country {
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 13px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 300;
}

.author-country-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-author-tooltip-bio,
.article-author-tooltip-bio p,
.article-author-tooltip-empty {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.52;
}

.article-author-tooltip-bio p + p {
  margin-top: 7px;
}

.article-author-tooltip-empty {
  font-style: italic;
  opacity: 0.8;
}

.article-author-tooltip-bio a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-author-tooltip-hint {
  margin-top: 13px;
  padding-top: 10px;
  color: #dec6e4;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12.5px;
}

/* Tooltip tidak tertutup oleh artikel berikutnya. */
.article-summary:hover,
.article-summary:focus-within,
.obj_article_summary:hover,
.obj_article_summary:focus-within {
  position: relative;
  z-index: 100;
}

/* ---------- Lightweight internal icons ---------- */

.summary-inline-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  vertical-align: middle;
  fill: none;
  stroke: #610c3a;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.summary-author-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.summary-doi-badge,
.summary-pdf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 22px;
  margin-right: 5px;
  padding: 0 5px;
  vertical-align: middle;
  color: #fff;
  background: #610c3a;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Article summary card ---------- */

.article-summary {
  position: relative;
  margin: 0;
  padding: 22px 0 24px;
  border-bottom: 1px solid #b9a9b2;
  overflow: visible;
}

.article-summary-header {
  position: relative;
  z-index: 2;
  margin-bottom: 16px;
}

.article-summary .article-summary-title {
  margin: 0 0 8px;
  line-height: 1.35;
}

.article-summary .article-summary-date {
  margin-bottom: 8px;
  color: #725d69;
  font-size: 0.86rem;
}

.article-summary-body {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(220px, 1fr) minmax(140px, auto);
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.article-summary-cover-link {
  position: relative;
  display: block;
  width: 100%;
  max-width: 220px;
  overflow: hidden;
  border-radius: 8px;
  outline-offset: 4px;
}

.article-summary-cover-preview {
  position: relative;
  width: 100%;
  max-width: 220px;
}

.article-summary-cover-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 44 / 27;
  object-fit: cover;
  background: #f4f1f3;
  border: 1px solid #82717a;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(53, 18, 47, 0.1);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.article-summary-cover-link:hover .article-summary-cover-image,
.article-summary-cover-link:focus .article-summary-cover-image {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(53, 18, 47, 0.16);
}

.article-summary-preview-label {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: #fff;
  background: rgba(53, 18, 47, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.article-summary-preview-label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-summary-cover-preview:hover .article-summary-preview-label,
.article-summary-cover-preview:focus-within .article-summary-preview-label {
  opacity: 1;
  transform: translateY(0);
}

.article-summary-preview-window {
  position: absolute;
  z-index: 10000;
  top: 50%;
  left: calc(100% + 14px);
  display: grid;
  visibility: hidden;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  width: min(570px, calc(100vw - 48px));
  padding: 18px;
  color: #fff;
  background: linear-gradient(145deg, #59174d 0%, #35122f 100%);
  border: 1px solid #a85fba;
  border-top: 3px solid #e311ff;
  border-radius: 13px;
  box-shadow:
    0 20px 45px rgba(53, 18, 47, 0.34),
    0 5px 14px rgba(53, 18, 47, 0.2);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% - 4px));
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
}

.article-summary-preview-window::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  background: #59174d;
  border-bottom: 1px solid #a85fba;
  border-left: 1px solid #a85fba;
  transform: translateY(-50%) rotate(45deg);
}

.article-summary-cover-preview:hover .article-summary-preview-window,
.article-summary-cover-preview:focus-within .article-summary-preview-window {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.article-summary-preview-image {
  display: block;
  width: 190px;
  height: 118px;
  object-fit: cover;
  align-self: start;
  background: #f4f1f3;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.article-summary-preview-content,
.article-summary-preview-title,
.article-summary-preview-heading,
.article-summary-preview-abstract,
.article-summary-preview-empty,
.article-summary-preview-hint {
  display: block;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
}

.article-summary-preview-content {
  min-width: 0;
}

.article-summary-preview-title {
  margin-bottom: 9px;
  color: #fff;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.3;
}

.article-summary-preview-heading {
  margin-bottom: 4px;
  color: #f4c9ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.article-summary-preview-abstract,
.article-summary-preview-empty {
  color: #fff;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1.43;
}

.article-summary-preview-empty {
  font-style: italic;
  opacity: 0.8;
}

.article-summary-preview-hint {
  margin-top: 10px;
  padding-top: 8px;
  color: #dec6e4;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
}

.article-summary-metrics {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #342b30;
  font-size: 1.1rem;
  line-height: 1.35;
}

.article-summary-metric {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.article-summary-metric > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.article-summary-metric .summary-inline-icon {
  flex: 0 0 22px;
  margin: 0;
}

.summary-metric-icon {
  display: inline-flex;
  flex: 0 0 25px;
  align-items: center;
  justify-content: center;
  height: 22px;
  color: #fff;
  background: #610c3a;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.summary-metric-icon--id {
  background: #1f9d68;
}

.summary-metric-icon--doi {
  color: #4b3212;
  background: #f4b323;
}

.article-summary-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 130px;
  text-align: right;
}

.article-summary-open-access {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  color: #54320a;
  background: #ffc447;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 100;
  line-height: 1;
}

.article-summary-open-access-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-summary-galleys {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.article-summary-galleys .btn,
.article-summary-galleys .galley-link {
  margin: 0;
}

.jh-announcement-date {
  font-size: 1.1rem;
}
.article-summary-actions .article-summary-pages {
  width: auto;
  color: #45383f;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
}

/* ---------- Responsive layout ---------- */

@media (max-width: 900px) {
  .article-summary-body {
    grid-template-columns: minmax(145px, 190px) minmax(200px, 1fr);
  }

  .article-summary-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .article-summary-preview-window {
    top: calc(100% + 12px);
    left: 0;
    grid-template-columns: 150px minmax(0, 1fr);
    width: min(520px, calc(100vw - 40px));
    transform: translateY(-4px);
  }

  .article-summary-cover-preview:hover .article-summary-preview-window,
  .article-summary-cover-preview:focus-within .article-summary-preview-window {
    transform: translateY(0);
  }

  .article-summary-preview-window::before {
    top: -7px;
    left: 28px;
    border-top: 1px solid #a85fba;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
  }

  .article-summary-preview-image {
    width: 150px;
    height: 96px;
  }
}

@media (max-width: 600px) {
  .article-summary {
    padding: 18px 0 20px;
  }

  .article-summary-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .article-summary-cover-link {
    max-width: 100%;
  }

  .article-summary-cover-preview {
    max-width: 100%;
  }

  .article-summary-cover-image {
    max-height: 190px;
  }

  .article-summary-preview-window {
    display: none;
  }

  .article-summary-actions {
    grid-column: auto;
    justify-content: flex-start;
    text-align: left;
  }

  /*
   * Pada layar kecil tooltip mengikuti area baris author agar
   * tidak terpotong pada sisi kanan atau kiri layar.
   */
  .article-author-list,
  .article-author-item {
    position: static;
  }

  .article-author-tooltip,
  .article-author-item:first-child .article-author-tooltip,
  .article-author-item:last-child .article-author-tooltip {
    top: calc(100% + 7px);
    right: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 15px 16px;
    transform: translateY(-4px);
  }

  .article-author-item:hover .article-author-tooltip,
  .article-author-item:focus-within .article-author-tooltip,
  .article-author-item:first-child:hover .article-author-tooltip,
  .article-author-item:first-child:focus-within .article-author-tooltip,
  .article-author-item:last-child:hover .article-author-tooltip,
  .article-author-item:last-child:focus-within .article-author-tooltip {
    transform: translateY(0);
  }

  .article-author-tooltip::before,
  .article-author-item:first-child .article-author-tooltip::before,
  .article-author-item:last-child .article-author-tooltip::before {
    right: auto;
    left: 48px;
    transform: rotate(45deg);
  }

  .article-author-tooltip-name {
    font-size: 16px;
  }

  .article-author-tooltip-affiliation,
  .article-author-tooltip-country {
    font-size: 12.5px;
  }

  .article-author-tooltip-bio,
  .article-author-tooltip-bio p,
  .article-author-tooltip-empty {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-author-tooltip,
  .article-summary-preview-label,
  .article-summary-preview-window {
    transition: none;
  }
}

.slider-container {
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 300%;
}
.slider-item {
  flex: 1;
  position: relative;
}
.slider-item img {
  width: auto;
  height: auto;
  border-radius: 10px;
}
.slider-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 15px;
  font-size: 16px;
}
.slider-caption h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
.slider-caption p {
  margin: 5px 0 0;
}
.navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}
.navigation button {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
}
.indicators {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}
.indicators span {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.indicators span.active {
  background: #007bff;
}

/* 1. Typography */
.circlestat {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.circlestat .label {
  position: absolute;
  bottom: -20px;
  font-size: 12px;
  color: black;
}

.citescore {
  background-color: #003366;
  color: white;
}

.impactfactor {
  background-color: #ffcc00;
  color: white;
}

/* Slider Item Layout */
.slider-item {
  display: flex; /* Atur elemen dalam satu baris */
  align-items: center; /* Rata vertikal */
  justify-content: space-between; /* Jarak maksimal antara elemen */
  padding: 10px 20px; /* Spasi dalam untuk konten */
}

/* Untuk Teks Tanggal dan Event */
.date-event {
  display: flex;
  flex-direction: column; /* Tanggal dan event dalam kolom */
  align-items: flex-start; /* Rata kiri */
  gap: 10px; /* Jarak antara tanggal dan event */
}

.year {
  font-weight: bold;
  color: #007bff;
}

.event {
  color: #333;
  margin: 0; /* Hilangkan margin default */
}

/* Untuk Ikon Wikipedia */
.icon-link {
  margin-left: 20px; /* Tambahkan jarak dari teks ke ikon */
}

.icon-link img {
  width: 25px;
  height: 25px;
  cursor: pointer; /* Menunjukkan bahwa ini dapat diklik */
  transition: transform 0.3s ease; /* Efek animasi saat hover */
}

/* Efek hover pada ikon */
.icon-link:hover img {
  transform: scale(1.2); /* Sedikit perbesar saat hover */
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 300%; /* Total lebar adalah 100% x jumlah slide */
}

.slider-item {
  flex: 0 0 100%; /* Setiap slide mengambil 100% dari lebar kontainer */
  text-align: left;
}

.slider-container {
  overflow: hidden;
  position: relative;
}

.scrolling-timeline {
  max-width: 1200px;
  height: 40px; /* Adjust to fit single-line height */
  overflow: hidden;
  justify-content: center; /* Center horizontally */
  white-space: nowrap; /* Prevent line breaks */
  position: relative;
  background-color: #ebb6ff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: "NexusSansTF-Regular";
  place-self: center;
}

.timeline-wrapper {
  display: flex;
  flex-direction: column;
  animation: scrollTimeline 9s linear infinite;
}

.timeline-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px; /* Space between year and event */
  height: 30px; /* Same as container height */
  padding: 0 10px;
  text-align: center; /* Menyelaraskan teks */
}

.year {
  font-weight: bold;
  color: #007bff;
  min-width: 60px; /* To align years consistently */
}

.event {
  color: #555;
}

@font-face {
  font-family: "NexusSansTF-Regular";
  src: url("https://db.onlinewebfonts.com/t/96af4c04b443456579a594b5c7a4701d.eot");
}

@font-face {
  font-family: "Ysabeau Office";
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/ysabeauoffice/v4/LDIpapaZKhM9RuQIp8FmdYrPPPLMg7AR9hGL.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "NexusSansTF-Regular";
  src: url("https://edutech-journals.org/NexusSansTF-Regular%20Regular.otf");
}

@font-face {
  font-family: "BerkeleyOld-Black";
  src: url("https://edutech-journals.org/BerkeleyOldstyleITCbyBT-Black.otf");
}

@font-face {
  font-family: "Cardo";
  src: url("https://edutech-journals.org/Cardo-Regular.ttf");
}

@font-face {
  font-family: "Perpetua";
  src: url("https://edutech-journals.org/perpetua.ttf");
}

.authors-string .author-string-href span {
  font-size: 18px; /* Ukuran font nama penulis */
  font-family: "Cardo";
  font-variant: unicase;
}

/* Mengatur gaya umum untuk informasi penulis */
.article-details-authors {
  margin-top: 20px;
  padding: 15px;
}

/* Menyusun info penulis dalam kolom */
.author-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Menata elemen penulis secara vertikal */
.author-item {
  padding: 10px 0;
  border-bottom: 1px solid #ddd; /* Garis bawah untuk pemisah antar penulis */
}

.author-item:last-child {
  border-bottom: none; /* Menghilangkan border bawah pada penulis terakhir */
}

/* Nama penulis, membuat lebih besar dan menonjol */
.author-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: left; /* Pastikan nama penulis rata kiri */
}

/* Gaya untuk afiliasi */
.author-affiliation {
  font-size: 16px;
  color: #555;
  text-align: left; /* Pastikan afiliasi rata kiri */
}

/* Menghilangkan padding atau margin ekstra jika ada */
.author-affiliation {
  margin: 0;
  padding: 0;
}

/* Memastikan tidak ada spasi di sekitar koma */
.author-affiliation {
  white-space: nowrap; /* Menghindari pemotongan kata */
}

/* Gaya untuk negara penulis (huruf besar dan tebal) */
.author-country {
  font-weight: bold;
  text-transform: uppercase;
  color: #2c3e50; /* Warna lebih gelap agar lebih jelas */
  text-align: left; /* Pastikan negara rata kiri */
}

/* Menata ORCID */
.author-orcid,
.author-email {
  font-size: 14px;
  color: #0077cc; /* Memberikan warna biru untuk link */
  display: flex;
  align-items: center;
  text-align: left; /* Pastikan ORCID dan email rata kiri */
}

.author-orcid i,
.author-email i {
  margin-right: 5px; /* Memberikan ruang antara ikon dan teks */
}

/* Menambahkan efek hover pada link */
.author-orcid:hover,
.author-email:hover {
  text-decoration: underline;
}

/* Responsif untuk ukuran layar kecil */
@media (max-width: 768px) {
  .article-details-authors {
    padding: 10px;
  }

  .author-item {
    padding: 8px 0;
  }

  .author-name {
    font-size: 16px;
  }

  .author-affiliation,
  .author-country {
    font-size: 14px;
  }

  .author-orcid,
  .author-email {
    font-size: 12px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #610c3a;
  font-family: "NexusSansTF-Regular";
  font-weight: 300;
}

h1 {
  font-size: 1.75rem;
  font-family: NexusSansTF-Regular;
}

a {
  color: #4f6acf;
  text-decoration: none;
  text-decoration-color: #d1b8c5;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: all ease-in-out 0.2s;
}

a:hover {
  color: #610c3a;
  text-decoration-color: #d1b8c5;
  text-decoration-thickness: 3px;
}

::selection {
  /* Style selections */
  background: #610c3a;
  color: #fcfcfc;
}

.page-content p,
.page-content li {
  font-size: 1.1rem !important;
  /* font-weight: 300; */
}

.jh-editor-note footer {
  font-family: "Perpetua";
  font-size: 1.1rem;
  text-transform: lowercase;
}

/* 2. Global */

.event-banner {
  background-color: #f5f3f4;
  padding: 20px 0;
  text-align: center;
  position: relative;
  width: 100%;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.banner-image {
  max-width: 100px;
  height: auto;
}

.banner-text {
  font-family:
    EB Garamond,
    Garamond,
    "NexusSansTF-Regular",
    sans-serif;
  font-size: 18px;
  color: #000;
}

.homepage-announcement:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.homepage-announcement a:hover {
  background-color: #b026f0; /* Change color on hover */
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .homepage-announcement {
    max-width: 100%;
    flex: 1 1 100%;
    padding: 10px; /* Adjust padding for mobile */
    height: auto; /* Allow flexible height on mobile */
    min-height: 240px; /* Set minimum height to ensure button visibility */
  }
  .homepage-announcement a {
    margin-top: 10px;
    font-size: 0.9em; /* Adjust font size for mobile */
  }
  .homepage-announcement:hover {
    animation: shimmer 1.5s infinite;
  }
}

.cover-image {
  border: 1px solid black;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
  width: 220px;
  height: 135px;
}

/* Hover effect: slight zoom and border color change */
.cover-image:hover {
  transform: scale(1.05); /* Slightly enlarge the image */
  border-color: #800000; /* Change border color on hover */
}
/* 2.1 Body */

body {
  font-family: "Perpetua", Lora;
  color: #161413;
  background-color: #fcfcfc;
}

/* 2.2 Header */

.main-header {
  border-bottom: 1px solid #c5b3bc;
  background: #f5f3f4;
}

.navbar-logo {
  max-width: 80%;
  padding-top: 2.5rem;
}

.navbar-logo a {
  border-bottom: 0px solid #d1b8c5;
  transition: all ease-in-out 0.15s;
}

.navbar-logo a:hover {
  border-bottom: 10px solid #d1b8c5;
}

.navbar-logo img {
  width: 100%;
}

/* Cover*/

.cvr {
  display: flex; /* Use flexbox to align items in a row */
  align-items: center; /* Center the items vertically */
  border: 2px solid black; /* Border around the container */
  padding: 5px; /* Space between the border and the image */ /* Include padding and border in the element's total width and height */
}

.cvr img {
  width: 200px; /* Set fixed width for the image */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Cover the space while maintaining aspect ratio */
  margin: 0;
  position: static; /* Keep the cover inside its container */
}

/* 2.3 Navbar */

#userNav .nav-link,
.language-toggle .dropdown-toggle {
  color: #a18a96;
  text-decoration: none;
  font-size: 12px;
}

#userNav .nav-link:hover,
.language-toggle .dropdown-toggle:hover,
#userNav .nav-link:focus,
.language-toggle .dropdown-toggle:focus {
  outline: 0;
  border-color: transparent;
  color: #8e6a7d;
}

#userNav .dropdown-menu,
.language-toggle .dropdown-menu {
  border-radius: 20px 5px 20px 20px;
}

#primaryNav .nav-link {
  letter-spacing: 0.25px;
  font-size: 1rem;
  text-decoration: none;
}

#primaryNav .nav-link:hover,
#primaryNav .nav-link:focus {
  background: #c47cde;
  color: #ffffff;
  border-color: transparent;
  font-weight: 300;
  letter-spacing: 0.25px;
  font-size: 1rem;
}

.badge-light {
  background: #d1b8c5cc;
  color: #161413aa;
}

.dropdown-item {
  transition: all ease-in-out 0.2s;
  text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
  border-color: transparent;
  color: #d1b8c5 !important;
}

#primaryNav .dropdown-menu.show {
  border-radius: 0px 0px 20px 20px;
  border-top: 1px solid #c5b3bc;
}

#primaryNav .dropdown-item {
  color: #fcfcfc;
  transition: all ease-in-out 0.2s;
  font-weight: 300;
  letter-spacing: 0.25px;
  text-decoration: none;
}

#primaryNav .dropdown-item:hover,
#primaryNav .dropdown-item:focus {
  background: transparent;
  color: #d1b8c5;
  border-color: transparent;
}

.dropdown-toggle::after {
  display: unset;
  margin-left: 0;
  vertical-align: baseline;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f103";
  color: #c5b3bc;
  padding-left: 3px;
}

/* 2.4 Footer */

/* Use prefooter block to aesthetically place sidebar content in footer; disable when not in use */

/*#CUSTOMblock-prefooter {
    flex-basis: auto;
    width: 100%;
    padding: 0;
}

@media (max-width: 767px) {
  #CUSTOMblock-prefooter {
    padding: 15px 15px 0 15px;
    margin-bottom: 0;
  }
}*/

.site-footer-sidebar {
  /* margin-bottom: 0; */
  padding-bottom: 0;
  /* border-bottom: 0; */
}

.site-footer {
  background: #2d46a5;
  color: #d1b8c5;
  padding-bottom: 0;
  font-family: "Perpetua";
}

.site-footer h3 {
  font-size: 1rem;
  color: #d1b8c5;
}

.site-footer p {
  font-size: 1rem;
}

.site-footer a {
  color: #fcfcfc;
  text-decoration: none;
  transition: all ease-in-out 0.2s;
}

.site-footer a:hover {
  color: #d1b8c5;
  text-decoration: none;
}

.site-footer .row .align-self-center {
  /* modify the align-self-center class in the footer because it's hard-coded in the template */
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.col-md.col-md-2.align-self-center.text-right {
  /* Remove PKP logo for placement elsewhere */
  display: none;
}

@media (min-width: 768px) {
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 22;
    max-width: 20.5%;
  }
}

.row {
}

@media (min-width: 991px) {
  .publisher-logos {
    float: left;
    text-align: left;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 50.063em) {
  .iflogo1 .iflogo1__if-number {
    bottom: 28pt;
    font-size: 14pt;
  }
}
.iflogo1 .iflogo1__if-number {
  position: relative;
  text-align: center;
  font-family: Suisse Intl !important;
  font-weight: 400;
  color: #222;
  text-decoration: none;
}

.publisher-logos {
  text-align: center;
  margin-bottom: 1rem;
}

/* 3. Styling */

/* 3.1 Buttons */

.label.openaccess {
  background-color: #fcb520;
  cursor: pointer;
  color: white;
}

.btn {
  border-radius: 0px;
  border: 1px solid #a18a96;
  color: #8e6a7d;
  text-transform: uppercase;
  font-weight: 300;
}

.btn-primary {
  /* Main (violet) buttons */
  border-radius: 0px 0px 0px 0px;
  border-color: #48092b !important;
  color: #fcfcfc;
  font-family: "NexusSansTF-Regular";
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #161413 !important;
  border-color: #161413 !important;
  color: #fcfcfc;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem #d1b8c5 !important;
}

.modal-content .btn-primary {
  /* Buttons in modals with violet backgrounds */
  background: transparent;
  border-radius: 10px !important;
  border-color: #fcfcfc44;
  color: #fcfcfcaa;
  text-transform: uppercase;
  transition: all ease-in-out 0.2s;
}

.modal-content .btn-primary:hover,
.modal-content .btn-primary:active {
  background: transparent;
  border-color: #fcfcfc77;
  color: #fcfcfc;
}

/* 3.2 Forms */

.form-control {
  background-color: #fcfcfc;
}

.form-control:hover {
  border-color: #d1b8c5;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #fff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #d1b8c5;
}

@media (max-width: 575px) {
  /* Lists with images on the side */
  .list-img {
    text-align: center !important;
  }

  .list-img > img {
    width: 150px !important;
    margin-bottom: 2rem;
  }
}

/* 3.3 Paragraphs */

.paragraph {
  font-weight: 300;
  font-size: 1.1rem;
  text-align: justify;
}

/* 3.4 Tooltips */

.hint {
  position: relative;
  display: inline-block;
  color: #610c3a;
}

.hint .hint-text {
  visibility: hidden;
  width: 200px;
  background-color: #610c3a;
  color: #fcfcfc;
  border-radius: 10px;
  padding: 10px 10px;
  position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s;
}

.hint .hint-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #610c3a transparent transparent transparent;
}

.hint:hover .hint-text {
  visibility: visible;
  opacity: 1;
}

/* 3.5 Page headers */

.page-header {
  margin-top: 5rem;
  margin-bottom: 1rem;
}

.page-header h1 {
  font-size: 1.8rem;
  text-transform: uppercase;
}

/* 4. Page-specific */

/* 4.1 Homepage */

/* 4.1.1 Homepage issue */

.homepage-image-behind-issue::after {
  background: rgba(0, 0, 0, 0.2);
}

.homepage-issue-current {
  /* 'CURRENT ISSUE' text */
  margin-top: 0 !important;
  font-family:
    "NexusSansTF-Regular",
    Fira Sans,
    sans-serif;
  font-size: 2rem;
  font-weight: 300;
  text-transform: uppercase;
}

.homepage-issue-identifier {
  display: none;
}

.homepage-issue-published {
  /* Date issue was published */
  margin-top: 1.5rem !important;
}

.homepage-issue-description-wrapper {
  /* Issue description box */
  display: flex;
  align-content: center;
  background: #f5f3f4;
  height: 297px;
  padding: 2.2rem 3rem;
  border: 1px solid #c5b3bc;
  border-radius: 0px 45px 0px 0px;
  line-height: 25px;
}

.homepage-issue-description .h2 {
  font-family: "NexusSansTF-Regular";
  /*font-style: italic;*/
  color: #2e0f42;
  font-size: 1.3rem !important;
  margin-bottom: 1rem;
}
.glow {
  width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.5s ease;
}

/* Kelas kedua: Efek Border */
.border-effect {
  border: 5px solid rgba(255, 255, 255, 0.7);
  padding: 5px;
  transition: border 0.5s ease;
}

.glow:hover {
  box-shadow: 0 0 40px 20px rgba(255, 255, 255, 1);
  transform: scale(1.05); /* Slightly enlarge the image */
  border-color: #1900fe; /* Change border color on hover */
}

.border-effect:hover {
  border: 5px solid rgba(0, 255, 255, 1); /* Mengubah warna border saat hover */
}

.quote-container {
  text-align: center;
  background-color: #ffffff;
  border: 2px solid #ccc;
  border-radius: 15px;
  width: 100%;
  position: relative;
  text-align: center;
}
.quote-container:before,
.quote-container:after {
  content: "“";
  font-size: 4rem;
  position: absolute;
  top: 10px;
  color: #6c757d;
}
.quote-container:before {
  left: 10px;
}
.quote-container:after {
  right: 10px;
}
.quote-text {
  font-size: 1.5rem;
  color: #333;
  font-style: italic;
  line-height: 1.6;
}
.quote-author {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #555;
}

.homepage-issue-description p {
  color: #161413;
  font-weight: 300;
  font-size: 1.05rem;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homepage-issue-description:after {
  display: none;
}

.homepage-issue-description-more {
  display: none !important;
  margin-top: 10px;
}

@media (max-width: 1199px) {
  .homepage-issue-current {
    color: #161413;
  }

  .homepage-issue-published {
    color: #8e6a7d;
    text-transform: uppercase;
  }

  .homepage-issue-description-wrapper {
    /* Issue description box */
    box-shadow: none;
  }
}

@media (max-width: 991px) {
  .homepage-issue-description-wrapper {
    /* Issue description box */
    height: 100%;
    padding: 1rem 0rem;
    border: 0;
    background: #fcfcfc;
  }

  .homepage-issue-description {
    padding-bottom: 0;
  }
}

@media (min-width: 769px) {
  .homepage-issue-cover {
    /* Cover image */
    width: 210px;
    height: 303px;
  }
}

@media (max-width: 768px) {
  .homepage-issue-cover {
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* 4.1.2 Homepage table of contents */

.issue-toc-section-title {
  font-size: 1.65rem;
  color: #610c3a;
  margin: 1rem 0;
}

.article-summary-authors,
.article-summary-pages {
  font-size: 0.9rem;
  font-family: "NexusSansTF-Regular", Lora;
  color: #8e6a7d;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 1.33;
}

@media (min-width: 992px) {
  .article-summary-pages {
    width: 56px;
  }
}

.article-summary-title {
  font-family: "Perpetua", "NexusSansTF-Regular", Lora;
  font-style: inherit;
}

.article-summary-title a {
  color: #000000;
  /*background:#c47cde;*/
  /*border-bottom: 0px solid #D1B8C5;*/
  text-decoration-color: #fcfcfc;
  text-decoration-thickness: 0px;
  /*transition: all ease-in-out 0.2s;*/
  line-height: 1.34;
  font-size: 1.1em;
  font-weight: bold;
}

.article-summary-title a:hover {
  /*border-bottom: 3px solid #D1B8C5;*/
  text-decoration: none;
  text-decoration-thickness: 3px;
  text-decoration-color: #d1b8c5;
  background: #e311ff;
  color: #ffffff;
  transition: background-color 0.5s ease;
}

.article-summary-doi {
  /* Do not show article DOIs in the table of contents */
  display: none;
}

/* 4.1.3 Introduction */

.asean-terms {
  list-style: none;
}

.asean-terms li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f101";
  color: #c5b3bc;
  font-size: 1rem;
  display: inline-block;
  width: 1.75rem;
  margin-left: -1.75rem;
}

/* 4.1.4 Homepage announcement */

.homepage-announcement {
  flex: 0 0 100%;
  max-width: 100%;
}

.homepage-issue-header {
  margin-bottom: 0em;
}
.homepage-announcement-title {
  font-size: 1.15rem;
  margin-top: 0em;
  margin-top: 0em;
}

.homepage-announcement a {
  font-size: 1.05rem;
  font-weight: 300;
}

/* 4.2 Issue table of contents */

.page-issue-date {
  color: #8e6a7d !important;
  text-transform: uppercase;
  font-weight: 300;
}

.page-issue-description-wrapper {
  display: flex;
  align-items: center;
  background: #f5f3f4;
  border: 1px solid #c5b3bc;
  min-height: 297px;
  padding: 2.8rem 3rem;
  border-radius: 45px 0px 0px 0px;
}

.page-issue-description-wrapper p {
  font-size: 1.05rem;
  text-align: justify;
  margin-bottom: 0;
}

.page-issue-description-wrapper .h2 {
  font-family: "Perpetua";
  /* font-style: italic;*/
  color: #161413;
  font-size: 1.3rem !important;
  margin-bottom: 1rem;
  text-align: left;
}

.article-details-issue-identifier a {
  color: #610c3a;
  font-size: 1.15rem;
  font-family: "Perpetua";
  font-variant: none;
}

.article-details-issue-section {
  color: #8e6a7d;
}

.article-details-published {
  color: #8e6a7d;
}

.authors-string {
  font-size: 1.25rem;
}

.authors-string a {
  border-bottom: 0px solid #d1b8c5;
}

.issue-toc-section + .issue-toc-section {
  border-top: 1px solid #c5b3bc !important;
}

/* 4.3 Individual articles */

.article-details-issue-identifier,
.article-details-heading,
.article-details .item > .label {
  color: #8e6a7d !important;
  font-weight: 300;
  font-family: "Perpetua";
}

.article-details-issue-identifier a {
  border-bottom: 0px solid #d1b8c5;
  transition: all ease-in-out 0.2s;
}

.article-details-issue-identifier a:hover,
.article-details-issue-identifier a:focus {
  color: #610c3a;
  text-decoration: none;
  border-bottom: 3px solid #d1b8c5;
}

.article-details-doi a {
  color: #1065f6;
  text-decoration: none;
  text-decoration-color: #d1b8c5;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: all ease-in-out 0.2s;
  font-family: "Cardo";
  font-variant: unicase;
  font-size: medium;
}

.article-details-doi a:hover {
  color: #610c3a;
  text-decoration-color: #d1b8c5;
  text-decoration-thickness: 3px;
}

.author-symbol {
  color: #8e6a7d !important;
}

.modal-header {
  font-family: "Cardo";
  font-variant: unicase;
}

.article-details-bio-toggle {
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.article-details-bio-toggle:hover {
  background-color: #dddddd;
  color: #000000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal {
  font-family: "Cardo";
  font-variant: unicase;
}

.author-string-href {
  font-size: 1.3rem;
  text-decoration: none;
  font-weight: 400;
}

.article-details-author-affiliation {
  color: #8e6a7d !important;
  font-size: 1.1rem !important;
  font-weight: 300;
  font-family: "Cardo";
  font-variant: unicase;
  line-height: 1.5;
}

.article-details-fulltitle {
  font-family: "Perpetua", "NexusSansTF-Regular", Lora;
  font-style: inherit;
  color: #161413;
  line-height: 1.2;
  text-transform: unset !important;
}

.article-details-issue-section {
  color: #8e6a7d !important;
  text-transform: uppercase;
  font-weight: 300;
}

.article-details-published {
  color: #8e6a7d !important;
  font-weight: 300;
  text-transform: uppercase;
}

.article-details-main {
  padding: 3rem 6rem;
  background: #f5f3f4;
  border: 1px solid #c5b3bc;
  border-radius: 45px 0px 0px 0px;
}

.article-details-abstract p {
  font-family: "Perpetua", Lora;
  text-align: justify;
  line-height: 1.5em;
}

.article-details-references p {
  font-family: "Perpetua", Lora;
  text-align: justify;
}

.article-details-sidebar ul {
  font-size: 1.05rem;
  font-weight: 300;
  list-style: none;
}

.article-details-sidebar ul li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f101";
  color: #c5b3bc;
  font-size: 1rem;
  display: inline-block;
  width: 1.25rem;
  margin-left: -2.5rem;
}

.article-details-keywords-value {
  font-size: 1.05rem;
  font-weight: 300;
}

.article-details-references-value {
  font-family: "NexusSansTF-Regular", Lora;
}

.article-details-license p {
  font-size: 1rem;
  font-weight: 300;
  margin-top: 1rem;
  margin-bottom: 0;
}

.article-details-license img {
  margin-left: 43%;
}

.article-details-author-orcid a {
  font-family: "Cardo";
}

.btn.btn {
  font-family: "Perpetua";
}

/* 4.4 All custom pages */

.custom-page .page-header h1 {
  font-size: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.page-content {
  border-top-color: #c5b3bc;
  font-size: 18px;
  line-height: 25px;
  font-family: "Perpetua";
}

/* 4.5 Contact page */

.contact-name {
  font-size: 16px;
}

.contact-affiliation {
  font-size: 16px;
}

.contact-email {
  font-size: 16px;
}

/* 4.6 Submissions page */

.submissions-checklist {
  font-size: 1.05rem;
  font-weight: 300;
}

.submissions-checklist ul {
  margin-top: 1rem;
  list-style: none;
}
.block_make_submission_link {
  font-family: "Perpetua";
}

.submissions-checklist ul li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f101";
  color: #c5b3bc;
  font-size: 1rem;
  display: inline-block;
  width: 1.525rem;
  margin-left: -1.8rem;
}

/* 4.7 FAQ page */

.faq-return a {
  color: #8e6a7d;
  transition: all ease-in-out 0.2s;
}

.faq-return a:hover {
  color: #610c3a;
  text-decoration: none;
}

/* 4.8 Search page */

.alert-info {
  background: #f5f3f4;
  color: #8e6a7d;
  border-color: #c5b3bc;
}

.search-filters {
  background: #f5f3f4;
  border: 1px solid #c5b3bc;
  border-radius: 45px 0 0 0;
}

.search-filters > h2 {
  color: #8e6a7d;
}

.search-filters label {
  color: #8e6a7d;
}

.form-control {
  color: #610c3a;
}

/* 4.9 Editorial team */

.editorial-member .col-lg-10 {
  display: grid;
}

.editorial-member img {
  border-radius: 60px 60px 60px 60px;
  border: 1px solid #c5b3bc;
}

.editorial-member a {
  font-family: "Cardo";
  transition: all ease-in-out 0.2s;
  font-variant: unicase;
}

.editorial-member a:hover {
  color: #161413;
}

.editorial-member h3 {
  margin: 0;
  font-size: 1.25rem;
  align-self: center;
}

.editorial-member h4 {
  margin: 0;
  line-height: 1.2;
  color: #8e6a7d;
  font-weight: 400;
  font-size: 1.05rem;
  align-self: self-end;
}

.editorial-member h5 {
  margin: 0;
  line-height: 1.2;
  color: #8e6a7d;
  font-weight: 300;
  font-size: 0.9rem;
  font-family: Cardo;
  align-self: self-end;
  font-variant: unicase;
}

.block_make_submission .block_make_submission_link {
  font-family: NexusSansTF-Regular;
}

.editorial-member p {
  margin: 0;
  align-self: center;
}

/* 4.10 Announcements */

.announcement-summary-date,
.announcement-date,
.homepage-announcement-date {
  font-family: "Perpetua", "Fira Sans", sans-serif !important;
  font-size: 1rem !important;
  color: #8e6a7d !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
}

/* 4.11 Archives */

.page-archives-header {
  margin-bottom: 4rem !important;
}

.page-archives .issue-summary {
  background: #fcfcfc;
}

.page-archives .issue-summary-cover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.page-archives .issue-summary .card-body {
  background: transparent;
}

.issue-summary-cover {
  max-width: 200px;
  height: auto;
  transition: transform 0.5s ease; /* Smooth transition for rotation */
}

.page-archives .issue-summary-series a {
  color: #ffffff;
  background: #ed4eeb;
  font-family: "Perpetua";
  font-size: 1.11rem;
  text-decoration: none;
}

.page-archives .issue-summary-series a:hover {
  color: #610c3a;
}

.page-archives .issue-summary-date {
  color: #8e6a7d !important;
  font-size: 0.9rem;
  font-weight: 300;
  text-transform: uppercase;
}

.page-archives .issue-summary-title {
  color: #8e6a7d !important;
  font-size: 0.9rem;
  font-weight: 300;
  font-family: "Cardo";
  font-variant: unicase;
}

/* Pagination */

.page-item {
  font-size: 1rem;
  font-weight: 300;
}

.page-item a {
  text-decoration: none;
}

.page-link {
  color: #8e6a7d !important;
  transition: all ease-in-out 0.2s;
}

.page-link:hover,
.page-link:focus {
  color: #610c3a !important;
  background: #fcfcfc !important;
  box-shadow: none;
}

.page-item:first-child .page-link {
  border: 0;
}

.page-item:first-child .page-link span {
  display: none;
}

.page-item:first-child .page-link:before {
  margin-left: 0;
  vertical-align: text-bottom;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f100";
  color: #c5b3bc;
  padding-right: 3px;
  transition: all ease-in-out 0.2s;
}

.page-item:first-child:hover .page-link:before {
  color: #610c3a;
}

.page-item:last-child .page-link {
  border: 0;
}

.page-item:last-child .page-link span {
  display: none;
}

.page-item:last-child .page-link:after {
  margin-left: 0;
  vertical-align: text-bottom;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f101";
  color: #c5b3bc;
  padding-left: 3px;
  transition: all ease-in-out 0.2s;
}

.page-item:last-child:hover .page-link:after {
  color: #610c3a;
}

.page-item.active .page-link {
  border: 0;
  color: #8e6a7d !important;
}

.page-item.disabled .page-link {
  color: #c5b3bc !important;
}

#primaryNav .dropdown-item {
  color: #a8a8a8;
  transition: all ease-in-out 0.2s;
  font-weight: 300;
  letter-spacing: 0.25px;
  text-decoration: none;
}

.homepage-image-behind-issue + .container-homepage-issue .homepage-issue-published {
}

.homepage-image-behind-issue + .container-homepage-issue .homepage-issue-current {
}

.article-details-published {
  visibility: hidden;
}

.page-issue-date {
}
.article-details-issue-identifier a {
  font-family: "Perpetua";
}

.issue-toc-section-title {
  font-family: "Cardo";
  font-variant: unicase;
}

.pkp_block .title {
  font-family: "Cardo";
  font-variant: unicase;
}

.pkp_block {
  flex: 0 0 auto;
  width: 100%;
}

.PlumX-Summary .pps-col.plx-plum {
  border-top: 9px solid #6e1a62 !important;
}
.PlumX-Summary .pps-col {
  float: left !important;
  width: 100% !important;
  padding: 12px !important;
}
.PlumX-Summary * {
  text-align: center !important;
}

@media (min-width: 992px) {
  #primaryNav .nav-link {
    padding: 0rem;
  }
}

.submissions-checklist {
  text-align: justify;
}

.page-content p,
.page-content li {
  text-align: justify;
}

.article-summary {
  margin: 0rem 0 0rem;
}

th {
  text-align: inherit;
  font-weight: normal;
}

.card-img-top {
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
  filter: brightness(90%);
}

.card-img-top:hover {
  border-radius: 0;
  transform: scale(1.1);
  filter: brightness(100%) contrast(1.2);
}

details {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  background-color: #f5f5f5;
}
summary {
  cursor: pointer;
  font-weight: bold;
  color: #007bff;
  outline: none;
}
summary:hover {
  color: #0056b3;
}

/* =========================================================
   VIEW ALL ISSUES BUTTON
   ========================================================= */

.container-homepage-issue > .text-center {
  position: relative;
  z-index: 2;
  padding: 28px 0 12px;
}

.container-homepage-issue > .text-center > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 22px;
  color: #ffffff;
  background: linear-gradient(135deg, #70144d 0%, #481035 100%);
  border: 1px solid #70144d;
  box-shadow: 0 8px 18px rgba(72, 16, 53, 0.2);
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 0.035em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  font-style: italic;
  font-variant: unicase;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

/* Ikon arsip */
.container-homepage-issue > .text-center > .btn::before {
  content: "\f187";
  font-family: "Font Awesome 5 Free";
  font-size: 0.9rem;
  font-weight: 900;
}

/* Ikon panah */
.container-homepage-issue > .text-center > .btn::after {
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

/* Efek hover dan keyboard focus */
.container-homepage-issue > .text-center > .btn:hover,
.container-homepage-issue > .text-center > .btn:focus {
  color: #ffffff;
  background: linear-gradient(135deg, #8b1a62 0%, #591540 100%);
  border-color: #e311ff;
  box-shadow: 0 12px 24px rgba(72, 16, 53, 0.28);
  outline: none;
  text-decoration: none;
  transform: translateY(-2px);
}

.container-homepage-issue > .text-center > .btn:hover::after,
.container-homepage-issue > .text-center > .btn:focus::after {
  transform: translateX(3px);
}

.container-homepage-issue > .text-center > .btn:focus-visible {
  box-shadow:
    0 0 0 3px rgba(227, 17, 255, 0.22),
    0 12px 24px rgba(72, 16, 53, 0.28);
}

/* Tampilan ponsel */
@media (max-width: 600px) {
  .container-homepage-issue > .text-center {
    padding-top: 22px;
  }

  .container-homepage-issue > .text-center > .btn {
    width: min(100%, 280px);
    min-height: 44px;
    padding: 28px 18px;
    font-size: 0.82rem;
  }
}

/* =========================================================
   ARTICLE COVER AND ABSTRACT HOVER PREVIEW
   ========================================================= */

.article-cover-hover {
  position: relative;
  display: block;
  width: 220px;
  max-width: 100%;
  outline: none;
}

/* Gambar pada daftar artikel */
.article-cover-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 44 / 27;
  object-fit: cover;

  background: #f4f1f3;
  border: 1px solid #82717a;
  border-radius: 9px;
  box-shadow: 0 5px 14px rgba(53, 18, 47, 0.12);

  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.article-cover-hover:hover .article-cover-thumbnail,
.article-cover-hover:focus .article-cover-thumbnail,
.article-cover-hover:focus-within .article-cover-thumbnail {
  filter: brightness(1.04);
  box-shadow: 0 10px 24px rgba(53, 18, 47, 0.22);
  transform: translateY(-3px);
}

/* Label Preview Abstract */
.article-cover-preview-label {
  position: absolute;
  right: 8px;
  bottom: 8px;

  display: inline-flex;
  align-items: center;
  padding: 5px 9px;

  color: #ffffff;
  background: rgba(53, 18, 47, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;

  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.article-cover-hover:hover .article-cover-preview-label,
.article-cover-hover:focus .article-cover-preview-label,
.article-cover-hover:focus-within .article-cover-preview-label {
  opacity: 1;
  transform: translateY(0);
}

/* Jendela abstract */
.article-cover-popup {
  position: absolute;
  z-index: 10000;
  top: 50%;
  left: calc(100% + 15px);

  display: grid;
  visibility: hidden;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;

  width: min(570px, calc(100vw - 48px));
  padding: 18px;

  color: #ffffff;
  background: linear-gradient(145deg, #59174d 0%, #35122f 100%);

  border: 1px solid #a85fba;
  border-top: 3px solid #e311ff;
  border-radius: 13px;

  box-shadow:
    0 20px 45px rgba(53, 18, 47, 0.34),
    0 5px 14px rgba(53, 18, 47, 0.2);

  text-align: left;

  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% - 5px));

  transition:
    visibility 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}

/* Segitiga penunjuk ke gambar */
.article-cover-popup::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;

  width: 12px;
  height: 12px;

  background: #59174d;
  border-bottom: 1px solid #a85fba;
  border-left: 1px solid #a85fba;

  transform: translateY(-50%) rotate(45deg);
}

/* Menampilkan jendela */
.article-cover-hover:hover .article-cover-popup,
.article-cover-hover:focus .article-cover-popup,
.article-cover-hover:focus-within .article-cover-popup {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

/* Gambar besar dalam jendela */
.article-cover-popup-image {
  display: block;
  width: 190px;
  height: 118px;
  object-fit: cover;
  align-self: start;

  background: #f4f1f3;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.article-cover-popup-content,
.article-cover-popup-title,
.article-cover-popup-heading,
.article-cover-popup-abstract,
.article-cover-popup-empty,
.article-cover-popup-hint {
  display: block;
}

.article-cover-popup-title {
  margin-bottom: 9px;
  color: #ffffff;

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.article-cover-popup-heading {
  margin-bottom: 5px;
  color: #f4c9ff;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.article-cover-popup-abstract,
.article-cover-popup-empty {
  color: #ffffff;

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.article-cover-popup-empty {
  font-style: italic;
  opacity: 0.8;
}

.article-cover-popup-hint {
  margin-top: 10px;
  padding-top: 8px;

  color: #dec6e4;
  border-top: 1px solid rgba(255, 255, 255, 0.2);

  font-family: Arial, sans-serif;
  font-size: 11px;
}

/* Mencegah popup tertutup artikel lainnya */
.article-summary:hover,
.article-summary:focus-within {
  position: relative;
  z-index: 100;
}

/* Tampilan tablet */
@media (max-width: 900px) {
  .article-cover-popup {
    top: calc(100% + 12px);
    left: 0;

    grid-template-columns: 150px minmax(0, 1fr);
    width: min(520px, calc(100vw - 40px));

    transform: translateY(-4px);
  }

  .article-cover-hover:hover .article-cover-popup,
  .article-cover-hover:focus .article-cover-popup,
  .article-cover-hover:focus-within .article-cover-popup {
    transform: translateY(0);
  }

  .article-cover-popup::before {
    top: -7px;
    left: 28px;

    border-top: 1px solid #a85fba;
    border-right: 0;
    border-bottom: 0;

    transform: rotate(45deg);
  }

  .article-cover-popup-image {
    width: 150px;
    height: 96px;
  }
}

/* Tampilan ponsel */
@media (max-width: 600px) {
  .article-cover-hover {
    width: 100%;
  }

  .article-cover-popup {
    grid-template-columns: 1fr;
    width: min(100%, calc(100vw - 32px));
  }

  .article-cover-popup-image {
    width: 100%;
    height: auto;
    max-height: 180px;
  }
}

/* Mengurangi animasi jika diminta perangkat */
@media (prefers-reduced-motion: reduce) {
  .article-cover-thumbnail,
  .article-cover-preview-label,
  .article-cover-popup {
    transition: none;
  }
}

.article-author-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.article-author-flag {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.article-author-tooltip-orcid {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 13px;
  padding: 5px 9px;

  color: #ffffff;
  background: rgba(166, 206, 57, 0.14);
  border: 1px solid rgba(166, 206, 57, 0.45);
  border-radius: 999px;

  font-size: 14px;
  line-height: 1.2;
}

.author-orcid-icon {
  display: inline-flex;
  flex: 0 0 19px;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;

  color: #ffffff;
  background: #a6ce39;
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 1;
}

.author-orcid-content {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 300;
}

.article-author-tooltip-orcid a {
  color: #ffffff;
  font-weight: 300;
  text-decoration: none;
}

.article-author-tooltip-orcid a:hover,
.article-author-tooltip-orcid a:focus {
  color: #dff5a5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Abstract-only cover preview */
.article-summary-preview-window--abstract-only {
  grid-template-columns: minmax(0, 1fr);
  width: min(460px, calc(100vw - 48px));
  padding: 20px 22px;
}

.article-summary-preview-window--abstract-only .article-summary-preview-heading {
  margin-bottom: 8px;
  color: #f4c9ff;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.article-summary-preview-window--abstract-only .article-summary-preview-abstract {
  color: #ffffff;
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.55;
  text-align: justify;
}

@media (max-width: 900px) {
  .article-summary-preview-window--abstract-only {
    grid-template-columns: minmax(0, 1fr);
    width: min(440px, calc(100vw - 40px));
  }
}

@media (max-width: 600px) {
  .article-summary-preview-window--abstract-only {
    width: min(100%, calc(100vw - 32px));
    padding: 17px 18px;
  }

  .article-summary-preview-window--abstract-only .article-summary-preview-abstract {
    font-size: 14px;
    text-align: left;
  }
}

/* =========================================================
   PROFESSIONAL CURRENT ISSUE
   ========================================================= */

.jhytel-current-header {
  margin-bottom: 24px;
  text-align: center;
}

.jhytel-current-label {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 12px;

  color: #ffffff;
  background: rgba(53, 18, 47, 0.88);
  border-radius: 999px;

  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.jhytel-current-title {
  margin: 0;
  color: #ffffff;

  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.2;
}

.jhytel-current-published {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.9);

  font-family: "Perpetua", Georgia, serif;
  font-size: 15px;
}

/* Kartu utama */
.jhytel-issue-feature {
  position: relative;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 34px;
  align-items: center;

  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 30px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.08), transparent 34%), #ffffff;

  border: 1px solid rgba(97, 12, 58, 0.18);
  border-top: 4px solid #e311ff;
  border-radius: 20px;

  box-shadow:
    0 24px 55px rgba(53, 18, 47, 0.18),
    0 6px 18px rgba(53, 18, 47, 0.1);
}

/* Cover */
.jhytel-issue-cover-column {
  position: relative;
}

.jhytel-issue-cover-link {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;

  background: #f3eff2;
  border-radius: 12px;

  box-shadow:
    0 16px 32px rgba(53, 18, 47, 0.24),
    0 4px 10px rgba(53, 18, 47, 0.12);

  outline-offset: 5px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.jhytel-issue-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.jhytel-issue-cover-link:hover,
.jhytel-issue-cover-link:focus {
  box-shadow:
    0 22px 42px rgba(53, 18, 47, 0.3),
    0 6px 14px rgba(53, 18, 47, 0.14);

  transform: translateY(-4px);
}

.jhytel-issue-cover-link:hover .jhytel-issue-cover,
.jhytel-issue-cover-link:focus .jhytel-issue-cover {
  filter: brightness(0.76);
  transform: scale(1.035);
}

.jhytel-cover-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #ffffff;

  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  opacity: 0;
  transform: translateY(5px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.jhytel-cover-overlay svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jhytel-issue-cover-link:hover .jhytel-cover-overlay,
.jhytel-issue-cover-link:focus .jhytel-cover-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Isi kartu */
.jhytel-issue-content {
  min-width: 0;
}

.jhytel-issue-title {
  margin: 0 0 12px;

  color: #2f1727;

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.3vw, 29px);
  font-weight: 700;
  line-height: 1.25;
}

.jhytel-issue-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}

.jhytel-meta-item,
.jhytel-open-access {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 5px 10px;

  border-radius: 999px;

  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.jhytel-meta-item {
  color: #624c58;
  background: #f4f0f2;
  border: 1px solid #ded2d8;
}

.jhytel-open-access {
  color: #563609;
  background: #ffc44d;
  border: 1px solid #eeb03c;
}

.jhytel-meta-item svg,
.jhytel-open-access svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jhytel-issue-description {
  margin-bottom: 20px;

  color: #40343a;

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.62;
  text-align: justify;
}

/* Tombol */
.jhytel-issue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jhytel-issue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 43px;
  padding: 10px 16px;

  border-radius: 8px;

  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  text-decoration: none;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.jhytel-issue-button svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jhytel-issue-button-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #70144d, #481035);
  border: 1px solid #70144d;
  box-shadow: 0 7px 15px rgba(72, 16, 53, 0.18);
}

.jhytel-issue-button-primary:hover,
.jhytel-issue-button-primary:focus {
  color: #ffffff;
  background: linear-gradient(135deg, #8b1a62, #591540);
  border-color: #e311ff;
  box-shadow: 0 10px 20px rgba(72, 16, 53, 0.26);
  text-decoration: none;
  transform: translateY(-2px);
}

.jhytel-issue-button-secondary {
  color: #610c3a;
  background: #ffffff;
  border: 1px solid rgba(97, 12, 58, 0.32);
}

.jhytel-issue-button-secondary:hover,
.jhytel-issue-button-secondary:focus {
  color: #ffffff;
  background: #610c3a;
  border-color: #610c3a;
  text-decoration: none;
  transform: translateY(-2px);
}

/* Full issue galley */
.jhytel-issue-galleys {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e1d7dc;
}

.jhytel-galleys-title {
  margin-bottom: 9px;
  color: #610c3a;

  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jhytel-galleys-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tablet */
@media (max-width: 991px) {
  .jhytel-current-title,
  .jhytel-current-published {
    color: #2f1727;
  }

  .jhytel-issue-feature {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
  }
}

/* Ponsel */
@media (max-width: 680px) {
  .jhytel-current-header {
    margin-bottom: 18px;
  }

  .jhytel-issue-feature {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 18px;
    border-radius: 15px;
  }

  .jhytel-issue-cover-column {
    width: min(230px, 75%);
    margin: 0 auto;
  }

  .jhytel-issue-title {
    text-align: center;
  }

  .jhytel-issue-meta,
  .jhytel-issue-actions {
    justify-content: center;
  }

  .jhytel-issue-description {
    font-size: 15px;
    text-align: left;
  }

  .jhytel-issue-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhytel-issue-cover-link,
  .jhytel-issue-cover,
  .jhytel-cover-overlay,
  .jhytel-issue-button {
    transition: none;
  }
}

/* =========================================================
   CURRENT ISSUE CONTAINER AND BUTTONS ONLY
   Posisi cover dan layout kolom tidak diubah
   ========================================================= */

/* Kartu informasi di sebelah kanan cover */
.homepage-issue-description-wrapper {
  position: relative;
  display: flex;
  align-items: center;

  height: auto !important;
  min-height: 297px;
  padding: 22px 34px !important;
  overflow: visible;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.065), transparent 36%), linear-gradient(135deg, #ffffff 0%, #faf7f9 100%);

  border: 1px solid #e3d8df;
  border-left: 4px solid #610c3a;
  border-top: 3px solid #e311ff;
  border-radius: 0 22px 22px 0;

  box-shadow:
    0 15px 34px rgba(53, 18, 47, 0.14),
    0 4px 12px rgba(53, 18, 47, 0.07);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.homepage-issue-description-wrapper:hover {
  border-left-color: #e311ff;

  box-shadow:
    0 19px 40px rgba(53, 18, 47, 0.19),
    0 5px 14px rgba(53, 18, 47, 0.09);

  transform: translateY(-2px);
}

/* Dekorasi lembut di kanan atas */
.homepage-issue-description-wrapper::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 22px;

  width: 65px;
  height: 65px;

  background: rgba(227, 17, 255, 0.07);
  border-radius: 50%;
  filter: blur(16px);
  pointer-events: none;
}

/* Judul issue */
.homepage-issue-description .h2 {
  position: relative;
  margin: 0 0 13px;

  color: #35122f;

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-weight: 300;
  line-height: 1.27;
}

/* Garis aksen di bawah judul */
.homepage-issue-description .h2::after {
  content: "";
  display: block;

  width: 48px;
  height: 3px;
  margin-top: 9px;

  background: linear-gradient(90deg, #e311ff, #610c3a);

  border-radius: 999px;
}

/* Deskripsi */
.homepage-issue-description-text {
  position: relative;
  z-index: 1;

  color: #443944;

  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  text-align: justify;
}

.homepage-issue-description-text > a {
  color: #610c3a;

  font-family: "Perpetua", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.homepage-issue-description-text > a:hover,
.homepage-issue-description-text > a:focus {
  color: #e311ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   CURRENT ISSUE BUTTONS
   Proporsional dan setema dengan panel J-HyTEL
   ========================================================= */

/* Kelompok tombol */
.jhytel-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;

  margin-top: 18px;
}

/* Dasar semua tombol */
.jhytel-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  font-family: "Perpetua", Arial, sans-serif;
  line-height: 1;
  text-decoration: none;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* =========================================================
   TOMBOL UTAMA: EXPLORE CURRENT ISSUE
   ========================================================= */

.jhytel-hero-button-primary {
  gap: 10px;
  padding: 8px 15px;

  color: #ffffff;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 46%), linear-gradient(135deg, #851758 0%, #610c3a 48%, #35122f 100%);
  border: 1px solid rgba(97, 12, 58, 0.7);
  box-shadow:
    0 8px 18px rgba(53, 18, 47, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* Lingkaran ikon */
.jhytel-hero-button-icon {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #610c3a;
  background: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);

  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.jhytel-hero-button-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Teks tombol utama */
.jhytel-hero-button-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;

  text-align: left;
}

.jhytel-hero-button-text small {
  color: rgba(255, 255, 255, 0.74);
  font-family: "Perpetua";
  font-weight: 300;
  letter-spacing: 0.075em;
  line-height: 1;
}

.jhytel-hero-button-text strong {
  color: #ffffff;
  font-weight: 300;
  line-height: 1.15;
  white-space: nowrap;
  font-family: "Perpetua";
}

/* Panah tombol utama */
.jhytel-hero-button-arrow {
  margin-left: 3px;

  color: rgba(255, 255, 255, 0.9);

  font-family: "Perpetua", sans-serif;
  font-size: 18px;
  line-height: 1;

  transition: transform 0.18s ease;
}

/* Hover tombol utama */
.jhytel-hero-button-primary:hover,
.jhytel-hero-button-primary:focus {
  color: #ffffff;

  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 46%), linear-gradient(135deg, #a01d6b 0%, #75134c 50%, #451334 100%);

  border-color: #e311ff;

  box-shadow:
    0 12px 25px rgba(53, 18, 47, 0.3),
    0 0 0 3px rgba(227, 17, 255, 0.08);

  text-decoration: none;
  transform: translateY(-3px);
}

.jhytel-hero-button-primary:hover .jhytel-hero-button-icon,
.jhytel-hero-button-primary:focus .jhytel-hero-button-icon {
  color: #851758;
  background: #ffffff;
  transform: scale(1.05);
}

.jhytel-hero-button-primary:hover .jhytel-hero-button-arrow,
.jhytel-hero-button-primary:focus .jhytel-hero-button-arrow {
  transform: translateX(4px);
}

/* =========================================================
   TOMBOL SEKUNDER: DISCOVER OUR SCOPE
   ========================================================= */

.jhytel-hero-button-secondary {
  gap: 8px;
  padding: 10px 16px;

  color: #610c3a;
  background: linear-gradient(135deg, #ffffff, #faf7f9);

  border: 1px solid rgba(97, 12, 58, 0.28);
  border-radius: 11px;

  box-shadow: 0 6px 14px rgba(53, 18, 47, 0.09);

  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Panah tombol sekunder */
.jhytel-hero-button-secondary span:last-child {
  color: #851758;
  font-family: Arial, sans-serif;
  font-size: 15px;

  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

/* Hover tombol sekunder */
.jhytel-hero-button-secondary:hover,
.jhytel-hero-button-secondary:focus {
  color: #ffffff;

  background: linear-gradient(135deg, #75164e, #481035);

  border-color: #610c3a;

  box-shadow: 0 10px 20px rgba(53, 18, 47, 0.2);

  text-decoration: none;
  transform: translateY(-3px);
}

.jhytel-hero-button-secondary:hover span:last-child,
.jhytel-hero-button-secondary:focus span:last-child {
  color: #ffffff;
  transform: translate(2px, -2px);
}

/* Fokus keyboard */
.jhytel-hero-button:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px rgba(227, 17, 255, 0.17),
    0 10px 22px rgba(53, 18, 47, 0.22);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
  .jhytel-hero-actions {
    gap: 8px;
  }

  .jhytel-hero-button {
    min-height: 46px;
  }

  .jhytel-hero-button-primary {
    padding: 7px 13px;
  }

  .jhytel-hero-button-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .jhytel-hero-button-text strong {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .jhytel-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .jhytel-hero-button {
    width: 100%;
  }

  .jhytel-hero-button-primary {
    justify-content: flex-start;
  }

  .jhytel-hero-button-arrow {
    margin-left: auto;
  }

  .jhytel-hero-button-secondary {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhytel-hero-button,
  .jhytel-hero-button-icon,
  .jhytel-hero-button-arrow,
  .jhytel-hero-button-secondary span:last-child {
    transition: none;
  }
}

/* Mencegah tombol Current Issue terpotong */
.homepage-issue-description {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding-bottom: 4px;

  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.homepage-issue-description-wrapper {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.jhytel-hero-actions {
  position: relative;
  z-index: 2;

  width: 100%;
  height: auto;
  min-height: 52px;
  margin: 18px 0 0;
  padding: 0 0 3px;

  overflow: visible;
}

/* =========================================================
   ALIGN CURRENT ISSUE WITH PANELS BELOW
   ========================================================= */

@media (min-width: 721px) {
  /*
     * Panel bawah menggunakan lebar bagian dalam container OJS,
     * bukan menghitung ulang lebar dengan calc().
     */
  .container-homepage-issue .jh-panel-section {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  /*
     * Lebar kolom Open Access disesuaikan dengan area cover,
     * sehingga kotak pesan editor sejajar dengan container
     * informasi Current Issue di atasnya.
     */
  .container-homepage-issue .jh-access-row {
    grid-template-columns: 243px minmax(0, 1fr);
    gap: 12px;
  }
}
/* =====================================================
   MINIMAL ABOUT JOURNAL
   ===================================================== */

.jhytel-about-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  margin: 22px 0;
  padding: 20px 24px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.08), transparent 38%), #ffffff;

  border: 1px solid #e7dce4;
  border-left: 4px solid #610c3a;
  border-radius: 0 14px 14px 0;

  box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}

.jhytel-about-heading {
  max-width: 650px;
}

.jhytel-about-label,
.jhytel-about-modal-kicker {
  display: block;
  margin-bottom: 5px;

  color: #851758;
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.jhytel-about-heading h2 {
  margin: 0 0 5px;

  color: #35122f;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.jhytel-about-heading p {
  margin: 0;

  color: #655a62;
  font-size: 14px;
  line-height: 1.55;
}

/* Tombol About */

.jhytel-about-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;

  min-height: 54px;
  padding: 8px 15px;

  color: #ffffff;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 45%), linear-gradient(135deg, #851758, #35122f);

  border: 1px solid #610c3a;
  border-radius: 11px;

  box-shadow: 0 8px 18px rgba(53, 18, 47, 0.2);
  cursor: pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.jhytel-about-button:hover,
.jhytel-about-button:focus {
  color: #ffffff;
  background: linear-gradient(135deg, #9b1b67, #4b1539);
  box-shadow: 0 11px 23px rgba(53, 18, 47, 0.28);
  transform: translateY(-2px);
  outline: none;
}

.jhytel-about-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #610c3a;
  background: #ffffff;
  border-radius: 50%;
}

.jhytel-about-button-icon svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jhytel-about-button-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.jhytel-about-button-text small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.jhytel-about-button-text strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
}

.jhytel-about-button-arrow {
  margin-left: 5px;
  color: #ffffff;
  font-size: 18px;
}

/* =====================================================
   MODAL / JENDELA ABOUT
   ===================================================== */

body.jhytel-modal-open {
  overflow: hidden;
}

.jhytel-about-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.jhytel-about-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.jhytel-about-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(24, 10, 22, 0.72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.jhytel-about-modal-dialog {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 48px);

  background: #ffffff;
  border: 1px solid rgba(227, 17, 255, 0.35);
  border-top: 4px solid #e311ff;
  border-radius: 18px;

  box-shadow: 0 24px 70px rgba(24, 10, 22, 0.34);
  overflow: hidden;

  transform: translateY(18px) scale(0.98);
  transition: transform 0.22s ease;
}

.jhytel-about-modal.is-open .jhytel-about-modal-dialog {
  transform: translateY(0) scale(1);
}

.jhytel-about-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  padding: 20px 24px 16px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.1), transparent 48%), #ffffff;

  border-bottom: 1px solid #eadfe7;
}

.jhytel-about-modal-header h2 {
  margin: 0;

  color: #35122f;
  font-size: 25px;
  line-height: 1.2;
}

.jhytel-about-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  padding: 0;

  color: #610c3a;
  background: #f7eff4;
  border: 1px solid #e3d3dd;
  border-radius: 50%;

  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.jhytel-about-modal-close:hover,
.jhytel-about-modal-close:focus {
  color: #ffffff;
  background: #610c3a;
  border-color: #610c3a;
  outline: none;
}

.jhytel-about-modal-body {
  max-height: calc(100vh - 210px);
  padding: 20px 24px;
  overflow-y: auto;
}

.jhytel-about-information {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 24px;
}

.jhytel-about-row {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 12px;

  padding: 9px 0;
  border-bottom: 1px solid #eee7ec;
}

.jhytel-about-key {
  color: #74676f;
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.jhytel-about-value {
  min-width: 0;

  color: #2f252c;
  font-size: 13px;
  line-height: 1.45;
}

.jhytel-about-value strong {
  color: #610c3a;
}

.jhytel-about-value a {
  color: #851758;
  font-weight: 700;
  text-decoration: none;
}

.jhytel-about-value a:hover {
  color: #610c3a;
  text-decoration: underline;
}

.jhytel-about-value small {
  display: block;
  margin-top: 2px;

  color: #81757d;
  font-size: 11px;
}

.jhytel-about-affiliation {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}

.jhytel-about-affiliation img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(53, 18, 47, 0.15);
}

.jhytel-about-collaboration {
  margin: 0;
  padding-left: 17px;
}

.jhytel-about-subjects {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #e8dde4;
}

.jhytel-about-subjects > strong {
  display: block;
  margin-bottom: 9px;

  color: #35122f;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.jhytel-about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.jhytel-about-tags span {
  padding: 6px 10px;

  color: #610c3a;
  background: #f8edf5;
  border: 1px solid #ead7e5;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.jhytel-about-tags span:nth-child(2) {
  color: #2f6440;
  background: #edf8f0;
  border-color: #d4ead9;
}

.jhytel-about-tags span:nth-child(3) {
  color: #58338a;
  background: #f2edfb;
  border-color: #dfd4f1;
}

.jhytel-about-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 24px;

  background: #fbf8fa;
  border-top: 1px solid #e8dde4;
}

.jhytel-about-more {
  color: #610c3a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.jhytel-about-more:hover {
  color: #851758;
  text-decoration: underline;
}

.jhytel-about-done {
  min-height: 38px;
  padding: 7px 18px;

  color: #ffffff;
  background: #610c3a;
  border: 1px solid #610c3a;
  border-radius: 8px;

  font-weight: 700;
  cursor: pointer;
}

.jhytel-about-done:hover,
.jhytel-about-done:focus {
  background: #851758;
  border-color: #851758;
  outline: none;
}

/* Tablet */

@media (max-width: 800px) {
  .jhytel-about-information {
    grid-template-columns: 1fr;
  }
}

/* Ponsel */

@media (max-width: 600px) {
  .jhytel-about-minimal {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }

  .jhytel-about-button {
    width: 100%;
    justify-content: flex-start;
  }

  .jhytel-about-button-arrow {
    margin-left: auto;
  }

  .jhytel-about-modal {
    align-items: flex-end;
    padding: 10px;
  }

  .jhytel-about-modal-dialog {
    max-height: calc(100vh - 20px);
    border-radius: 15px;
  }

  .jhytel-about-modal-header,
  .jhytel-about-modal-body,
  .jhytel-about-modal-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .jhytel-about-modal-body {
    max-height: calc(100vh - 190px);
  }

  .jhytel-about-row {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .jhytel-about-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .jhytel-about-done {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhytel-about-modal,
  .jhytel-about-modal-dialog,
  .jhytel-about-button {
    transition: none;
  }
}

/* =====================================================
   COMPACT GEOGRAPHICAL DIVERSITY
   ===================================================== */

.jhytel-geo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 22px;

  margin: 20px 0;
  padding: 17px 20px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.08), transparent 42%), #ffffff;

  border: 1px solid #e7dce4;
  border-left: 4px solid #610c3a;
  border-radius: 0 14px 14px 0;

  box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}

.jhytel-geo-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.jhytel-geo-icon {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  color: #ffffff;
  background: linear-gradient(135deg, #851758, #35122f);
  border-radius: 50%;

  box-shadow: 0 6px 14px rgba(53, 18, 47, 0.2);
}

.jhytel-geo-icon svg {
  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jhytel-geo-heading > span,
.jhytel-geo-window-header > div > span {
  display: block;
  margin-bottom: 2px;

  color: #851758;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.jhytel-geo-heading h3 {
  margin: 0 0 3px;
  font-family: "Perpetua";
  color: #2d46a5;
  font-size: 20px;
  line-height: 1.25;
  font-style: italic;
  font-variant: unicase;
}

.jhytel-geo-heading p {
  margin: 0;

  color: #756970;
  font-size: 12px;
  line-height: 1.4;
}

.jhytel-geo-statistics {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jhytel-geo-stat {
  min-width: 70px;
  padding: 7px 10px;

  background: #faf6f9;
  border: 1px solid #eadde6;
  border-radius: 9px;
  text-align: center;
}

.jhytel-geo-stat strong {
  display: block;
  color: #610c3a;
  line-height: 1;
}

.jhytel-geo-stat span {
  display: block;
  margin-top: 3px;

  color: #786b73;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.jhytel-geo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 43px;
  padding: 8px 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #851758, #35122f);
  border: 1px solid #610c3a;
  text-decoration: none;
  box-shadow: 0 7px 16px rgba(53, 18, 47, 0.18);
  white-space: nowrap;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.jhytel-geo-button:hover,
.jhytel-geo-button:focus {
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(53, 18, 47, 0.27);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Modal */

.jhytel-geo-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    visibility 0.2s ease,
    opacity 0.2s ease;
}

.jhytel-geo-modal:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.jhytel-geo-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(24, 9, 22, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.jhytel-geo-window {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 920px;

  background: #ffffff;
  border: 1px solid rgba(227, 17, 255, 0.38);
  border-top: 4px solid #e311ff;
  border-radius: 17px;

  box-shadow: 0 25px 75px rgba(24, 9, 22, 0.38);
  overflow: hidden;

  transform: translateY(15px) scale(0.98);
  transition: transform 0.2s ease;
}

.jhytel-geo-modal:target .jhytel-geo-window {
  transform: translateY(0) scale(1);
}

.jhytel-geo-window-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  padding: 14px 18px 12px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.1), transparent 48%), #ffffff;

  border-bottom: 1px solid #eadfe7;
}

.jhytel-geo-window-header h2 {
  margin: 0 0 2px;
  color: #35122f;
  font-size: 20px;
  line-height: 1.2;
  font-variant: unicase;
  font-style: italic;
  font-family: "perpetua";
}

.jhytel-geo-window-header p {
  margin: 0;
  color: #756970;
  font-size: 11px;
}

.jhytel-geo-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #610c3a;
  background: #f7eff4;
  border: 1px solid #e3d3dd;
  border-radius: 50%;

  font-size: 24px;
  line-height: 1;
  text-decoration: none;
}

.jhytel-geo-close:hover {
  color: #ffffff;
  background: #610c3a;
  text-decoration: none;
}

/* Responsive iframe without adding homepage height */

.homepage-additional-content {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.jhytel-geo-map {
  position: relative;
  height: 437px;

  background: #fafafa;
  overflow: hidden;
}

.jhytel-geo-map iframe {
  position: absolute;
  top: 0;
  left: 50%;

  width: 939px !important;
  height: 580px !important;

  border: 0;

  transform: translateX(-50%) scale(0.74);
  transform-origin: top center;
}

/* Country chips */

.jhytel-geo-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;

  padding: 10px 18px;

  background: #ffffff;
  border-top: 1px solid #eee7ec;
}

.jhytel-geo-countries span {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 4px 7px;

  color: #4b3c45;
  background: #f8f3f7;
  border: 1px solid #eadde6;
  border-radius: 999px;

  font-size: 10px;
  line-height: 1;
}

.jhytel-geo-countries img {
  width: 16px !important;
  height: 12px !important;

  object-fit: cover;
  border-radius: 1px;

  box-shadow: 0 0 0 1px rgba(53, 18, 47, 0.16);
}

.jhytel-geo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 10px 18px;

  background: #fbf8fa;
  border-top: 1px solid #e8dde4;
}

.jhytel-geo-footer > span {
  color: #786b73;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.jhytel-geo-footer a {
  padding: 7px 17px;
  color: #ffffff;
  background: #610c3a;
  font-size: 16px;
  text-decoration: none;
}

/* Responsive */

@media (max-width: 800px) {
  .jhytel-geo-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jhytel-geo-statistics {
    display: none;
  }
}

@media (max-width: 600px) {
  .jhytel-geo-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .jhytel-geo-button {
    width: 100%;
    box-sizing: border-box;
  }

  .jhytel-geo-modal {
    align-items: flex-start;
    padding: 8px;
    overflow-y: auto;
  }

  .jhytel-geo-window {
    margin: 0 auto;
    border-radius: 14px;
  }

  .jhytel-geo-map {
    height: 310px;
  }

  .jhytel-geo-countries {
    max-height: 100px;
    overflow-y: auto;
  }
}
/* =====================================================
   COMPACT JOURNAL IMPACT
   ===================================================== */

.jhytel-impact-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: center;
  gap: 24px;

  margin: 20px 0;
  padding: 18px 20px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.08), transparent 40%), #ffffff;

  border: 1px solid #e7dce4;
  border-left: 4px solid #610c3a;
  border-radius: 0 14px 14px 0;

  box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}

.jhytel-impact-intro {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.jhytel-impact-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  color: #ffffff;
  background: linear-gradient(135deg, #851758, #35122f);
  border-radius: 50%;

  box-shadow: 0 7px 15px rgba(53, 18, 47, 0.2);
}

.jhytel-impact-icon svg {
  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jhytel-impact-intro h2 {
  margin: 0 0 4px;
  color: #2d46a5;
  font-size: 20px;
  line-height: 1.25;
  font-style: italic;
  font-variant: unicase;
  font-family: "Perpetua";
}

.jhytel-impact-intro p {
  max-width: 440px;
  margin: 0;

  color: #756970;
  font-size: 12px;
  line-height: 1.45;
}

/* Statistics */

.jhytel-impact-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 7px;
}

.jhytel-impact-metric {
  padding: 7px 8px;
  background: #faf6f9;
  border: 1px solid #eadde6;
  border-radius: 9px;
  text-align: center;
}

.jhytel-impact-metric strong {
  display: block;
  color: #610c3a;
  line-height: 1;
}

.jhytel-impact-metric span {
  display: block;
  margin-top: 4px;

  color: #786b73;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Buttons */

.jhytel-impact-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jhytel-impact-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 37px;
  padding: 7px 12px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.jhytel-impact-button-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #851758, #35122f);
  border: 1px solid #610c3a;
  box-shadow: 0 6px 14px rgba(53, 18, 47, 0.18);
}

.jhytel-impact-button-primary:hover,
.jhytel-impact-button-primary:focus {
  color: #ffffff;
  box-shadow: 0 9px 19px rgba(53, 18, 47, 0.27);
  text-decoration: none;
  transform: translateY(-2px);
}

.jhytel-impact-button-secondary {
  color: #610c3a;
  background: #ffffff;
  border: 1px solid #d9c5d2;
}

.jhytel-impact-button-secondary:hover,
.jhytel-impact-button-secondary:focus {
  color: #ffffff;
  background: #610c3a;
  border-color: #610c3a;
  text-decoration: none;
}

/* =====================================================
   IMPACT MODAL
   ===================================================== */

.jhytel-impact-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    visibility 0.2s ease,
    opacity 0.2s ease;
}

.jhytel-impact-modal:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.jhytel-impact-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(24, 9, 22, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.jhytel-impact-window {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 850px;

  background: #ffffff;
  border: 1px solid rgba(227, 17, 255, 0.36);
  border-top: 4px solid #e311ff;
  border-radius: 17px;

  box-shadow: 0 25px 75px rgba(24, 9, 22, 0.38);
  overflow: hidden;

  transform: translateY(15px) scale(0.98);
  transition: transform 0.2s ease;
}

.jhytel-impact-modal:target .jhytel-impact-window {
  transform: translateY(0) scale(1);
}

.jhytel-impact-window-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  padding: 15px 19px 12px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.1), transparent 48%), #ffffff;

  border-bottom: 1px solid #eadfe7;
}

.jhytel-impact-window-header h2 {
  margin: 0 0 3px;
  color: #35122f;
  font-size: 20px;
  font-family: "perpetua";
  font-variant: unicase;
  font-style: italic;
  line-height: 1.2;
}

.jhytel-impact-window-header p {
  margin: 0;
  color: #756970;
  font-size: 11px;
}

.jhytel-impact-close {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #610c3a;
  background: #f7eff4;
  border: 1px solid #e3d3dd;
  border-radius: 50%;

  font-size: 24px;
  line-height: 1;
  text-decoration: none;
}

.jhytel-impact-close:hover {
  color: #ffffff;
  background: #610c3a;
  text-decoration: none;
}

/* Modal content */

.jhytel-impact-window-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  padding: 14px 18px;
}

.jhytel-impact-source {
  padding: 13px;

  background: #fcfafb;
  border: 1px solid #e9dfe5;
  border-radius: 14px;
}

.jhytel-impact-source-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
  font-size: 20px;
  font-family: "perpetua";
  font-variant: unicase;
  font-style: italic;
}

.jhytel-impact-source-header span {
  display: block;
  color: #8b7d85;
  font-size: 14px;
  letter-spacing: 0.07em;
}

.jhytel-impact-source-header h3 {
  margin: 2px 0 0;
  font-size: 20px;
  font-family: "perpetua";
  font-variant: unicase;
  font-style: italic;
  color: #35122f;
}

.jhytel-impact-source-header a,
.jhytel-impact-status {
  color: #851758 !important;
  font-size: 16px !important;
  text-decoration: none;
  font-variant: unicase;
}

.jhytel-impact-source-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.jhytel-impact-source:first-child .jhytel-impact-source-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jhytel-impact-source-metrics > div {
  padding: 8px 5px;

  background: #ffffff;
  border: 1px solid #eee5eb;
  border-radius: 7px;
  text-align: center;
}

.jhytel-impact-source-metrics strong {
  display: block;

  color: #610c3a;
  font-size: 17px;
  line-height: 1;
}

.jhytel-impact-source-metrics span {
  display: block;
  margin-top: 4px;

  color: #7e7179;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Quartiles */

.jhytel-impact-quartiles {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.jhytel-impact-quartile {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 11px;

  background: #ffffff;
  border: 1px solid #e9dfe5;
  border-radius: 9px;
}

.jhytel-quartile-badge {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #ffffff;
  border-radius: 8px;

  font-size: 14px;
  font-weight: 800;
}

.jhytel-quartile-badge.q1 {
  background: #2b7a4b;
}

.jhytel-quartile-badge.q2 {
  background: #b87816;
}

.jhytel-quartile-badge.q3 {
  background: #851758;
}

.jhytel-impact-quartile strong {
  display: block;
  color: #35122f;
  font-size: 14px;
}

.jhytel-impact-quartile small {
  display: block;
  margin-top: 2px;

  color: #83767e;
  font-size: 14px;
  line-height: 1.25;
}

/* Note */

.jhytel-impact-note {
  grid-column: 1 / -1;

  padding: 9px 12px;

  background: linear-gradient(90deg, #faf3f8, #ffffff);
  border-left: 3px solid #851758;
  border-radius: 0 8px 8px 0;
}

.jhytel-impact-note strong {
  color: #851758 !important;
  font-size: 16px !important;
  text-decoration: none;
  font-variant: unicase;
  font-weight: 300;
}

.jhytel-impact-note p {
  margin: 3px 0 0;

  color: #6e6269;
  font-size: 10px;
  line-height: 1.4;
}

/* Footer */

.jhytel-impact-window-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 10px 18px;

  background: #fbf8fa;
  border-top: 1px solid #e8dde4;
}

.jhytel-impact-window-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.jhytel-impact-window-footer > div a {
  color: #851758;
  text-decoration: none;
}

.jhytel-impact-done {
  padding: 7px 17px;
  color: #ffffff;
  background: #610c3a;
  font-size: 16px;
  text-decoration: none;
}

.jhytel-impact-done:hover {
  color: #ffffff;
  background: #851758;
  text-decoration: none;
}

/* Responsive */

@media (max-width: 900px) {
  .jhytel-impact-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jhytel-impact-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .jhytel-impact-button {
    flex: 1;
  }
}

@media (max-width: 650px) {
  .jhytel-impact-card {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .jhytel-impact-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jhytel-impact-actions {
    flex-direction: column;
  }

  .jhytel-impact-modal {
    align-items: flex-start;
    padding: 8px;
    overflow-y: auto;
  }

  .jhytel-impact-window {
    margin: 0 auto;
    border-radius: 14px;
  }

  .jhytel-impact-window-content {
    grid-template-columns: 1fr;
  }

  .jhytel-impact-quartiles {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .jhytel-impact-note {
    grid-column: auto;
  }

  .jhytel-impact-source-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jhytel-impact-source:first-child .jhytel-impact-source-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =====================================================
   CLICKABLE QUARTILE ACCORDION
   ===================================================== */

.jhytel-quartile-accordion {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

.jhytel-quartile-details {
  min-width: 0;

  background: #ffffff;
  border: 1px solid #e9dfe5;
  border-radius: 9px;

  overflow: hidden;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.jhytel-quartile-details:hover {
  border-color: #d6bdcd;
  box-shadow: 0 5px 13px rgba(53, 18, 47, 0.08);
}

.jhytel-quartile-details[open] {
  grid-column: 1 / -1;

  border-color: #cdaabd;
  box-shadow: 0 8px 18px rgba(53, 18, 47, 0.1);
}

/* Summary button */

.jhytel-quartile-details summary {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 52px;
  padding: 8px 10px;

  cursor: pointer;
  list-style: none;
  user-select: none;
}

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

.jhytel-quartile-details summary::marker {
  display: none;
  content: "";
}

.jhytel-quartile-details summary:focus {
  outline: 2px solid rgba(227, 17, 255, 0.4);
  outline-offset: -2px;
}

.jhytel-quartile-summary-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.jhytel-quartile-summary-text strong {
  color: #35122f;
  font-size: 16px;
  line-height: 1.25;
}

.jhytel-quartile-summary-text small {
  margin-top: 2px;
  color: #83767e;
  font-size: 16px;
  line-height: 1.25;
}

.jhytel-quartile-arrow {
  flex: 0 0 auto;

  color: #851758;
  font-size: 14px;
  font-weight: 700;

  transition: transform 0.18s ease;
}

.jhytel-quartile-details[open] .jhytel-quartile-arrow {
  transform: rotate(180deg);
}

/* Expanded content */

.jhytel-quartile-content {
  padding: 0 11px 11px;
  border-top: 1px solid #eee5eb;
}

.jhytel-quartile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;

  margin: 10px 0 0;
  padding-left: 25px;

  counter-reset: quartile-journal;
}

.jhytel-quartile-list li {
  position: relative;
  min-width: 0;
  padding: 6px 75px 6px 0;

  color: #756970;
  border-bottom: 1px dashed #eee4ea;

  font-size: 12px;
  line-height: 1.35;
}

.jhytel-quartile-list li::marker {
  color: #851758;
  font-weight: 700;
}

.jhytel-quartile-list li a {
  display: block;

  color: #4d253e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.jhytel-quartile-list li a:hover {
  color: #851758;
  text-decoration: underline;
}

.jhytel-quartile-list li > span {
  position: absolute;
  top: 6px;
  right: 0;

  padding: 2px 5px;

  color: #ffffff;
  background: #610c3a;
  border-radius: 4px;

  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.jhytel-quartile-list li > small {
  display: block;
  margin-top: 2px;
  color: #958890;
  font-size: 14px;
}

/* Badge colors */

.jhytel-quartile-badge {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #ffffff;
  border-radius: 8px;

  font-size: 14px;
  font-weight: 800;
}

.jhytel-quartile-badge.q1 {
  background: linear-gradient(135deg, #31885a, #185335);
}

.jhytel-quartile-badge.q2 {
  background: linear-gradient(135deg, #d28a1c, #965706);
}

.jhytel-quartile-badge.q3 {
  background: linear-gradient(135deg, #9b286e, #610c3a);
}

/* Mobile */

@media (max-width: 650px) {
  .jhytel-quartile-accordion {
    grid-template-columns: 1fr;
  }

  .jhytel-quartile-details[open] {
    grid-column: auto;
  }

  .jhytel-quartile-list {
    grid-template-columns: 1fr;
  }

  .jhytel-quartile-list li {
    padding-right: 70px;
  }
}

/* =====================================================
   J-HyTEL FOOTER HUB
   ===================================================== */

.jhytel-footerhub {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 0.9fr);
  gap: 10px;

  margin: 20px 0;
  padding: 12px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.08), transparent 40%), #ffffff;

  border: 1px solid #e7dce4;
  border-left: 4px solid #610c3a;
  border-radius: 0 14px 14px 0;

  box-shadow: 0 8px 22px rgba(53, 18, 47, 0.09);
}

.jhytel-footerhub-card {
  display: flex;
  align-items: center;
  gap: 11px;

  min-width: 0;
  min-height: 92px;
  padding: 12px;

  background: #fcfafb;
  border: 1px solid #e9dfe5;
  border-radius: 11px;

  box-sizing: border-box;
  text-decoration: none;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.jhytel-footerhub-card-link:hover,
.jhytel-footerhub-card-link:focus {
  border-color: #cdaabd;
  box-shadow: 0 8px 17px rgba(53, 18, 47, 0.13);
  text-decoration: none;
  transform: translateY(-2px);
}

.jhytel-footerhub-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

/* Text */

.jhytel-footerhub-label {
  display: block;

  color: #851758;
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.25;
  text-transform: uppercase;
}

.jhytel-footerhub-title {
  display: block;
  margin-top: 4px;

  color: #35122f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

a.jhytel-footerhub-title:hover {
  color: #851758;
  text-decoration: underline;
}

.jhytel-footerhub-description {
  display: block;
  margin-top: 4px;

  color: #7c6f77;
  font-size: 10px;
  line-height: 1.4;
  text-decoration: none;
}

a.jhytel-footerhub-description:hover {
  color: #851758;
  text-decoration: underline;
}

.jhytel-footerhub-arrow {
  flex: 0 0 auto;

  color: #851758;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/* =====================================================
   BASIC ROUND ICON
   ===================================================== */

.jhytel-footerhub-icon {
  display: inline-flex !important;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;

  width: 44px !important;
  height: 44px !important;

  color: #ffffff !important;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #851758, #35122f);

  border: 2px solid rgba(227, 17, 255, 0.45);
  border-radius: 50%;

  box-shadow:
    0 6px 14px rgba(53, 18, 47, 0.21),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.jhytel-footerhub-icon > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: #ffffff !important;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

/* Music */

.jhytel-footerhub-music-icon > span {
  font-size: 25px;
}

/* Visitor eye */

.jhytel-footerhub-visitor-icon > span {
  width: 24px;
  height: 15px;

  color: #ffffff !important;
  background: transparent;

  border: 2px solid #ffffff;
  border-radius: 50% / 65%;

  font-family: Arial, sans-serif;
  font-size: 8px;
  line-height: 1;
}

/* =====================================================
   SDG ICON
   ===================================================== */

.jhytel-footerhub-sdg {
  display: inline-flex !important;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;

  width: 46px !important;
  height: 46px !important;

  /* Fallback */
  background: #851758;

  background: conic-gradient(
    #e5243b 0deg 21deg,
    #dda63a 21deg 42deg,
    #4c9f38 42deg 63deg,
    #c5192d 63deg 84deg,
    #ff3a21 84deg 105deg,
    #26bde2 105deg 126deg,
    #fcc30b 126deg 147deg,
    #a21942 147deg 168deg,
    #fd6925 168deg 189deg,
    #dd1367 189deg 210deg,
    #fd9d24 210deg 231deg,
    #bf8b2e 231deg 252deg,
    #3f7e44 252deg 273deg,
    #0a97d9 273deg 294deg,
    #56c02b 294deg 315deg,
    #00689d 315deg 336deg,
    #19486a 336deg 360deg
  );

  border: 2px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 6px 14px rgba(53, 18, 47, 0.2),
    0 0 0 1px rgba(53, 18, 47, 0.13);
}

.jhytel-footerhub-sdg > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 29px !important;
  height: 29px !important;

  color: #610c3a !important;
  background: #ffffff !important;
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 8px !important;
  font-weight: 800;
  line-height: 1;
}

/* Audio */

.jhytel-footerhub-audio {
  display: block;

  width: 100%;
  max-width: 210px;
  height: 32px;
  margin-top: 6px;
}

/* Visitor button */

.jhytel-footerhub-visitor-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  margin-top: 6px;

  color: #851758;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.jhytel-footerhub-visitor-button:hover,
.jhytel-footerhub-visitor-button:focus {
  color: #610c3a;
  text-decoration: underline;
}

/* =====================================================
   VISITOR MODAL
   ===================================================== */

.jhytel-footerhub-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    visibility 0.2s ease,
    opacity 0.2s ease;
}

.jhytel-footerhub-modal:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.jhytel-footerhub-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(24, 9, 22, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.jhytel-footerhub-window {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 880px;

  background: #ffffff;
  border: 1px solid rgba(227, 17, 255, 0.38);
  border-top: 4px solid #e311ff;
  border-radius: 17px;

  box-shadow: 0 25px 75px rgba(24, 9, 22, 0.38);
  overflow: hidden;

  transform: translateY(15px) scale(0.98);
  transition: transform 0.2s ease;
}

.jhytel-footerhub-modal:target .jhytel-footerhub-window {
  transform: translateY(0) scale(1);
}

/* Modal header */

.jhytel-footerhub-window-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  padding: 16px 19px 13px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.1), transparent 48%), #ffffff;

  border-bottom: 1px solid #eadfe7;
}

.jhytel-footerhub-window-header h2 {
  margin: 4px 0;

  color: #35122f;
  font-size: 22px;
  line-height: 1.2;
}

.jhytel-footerhub-window-header p {
  margin: 0;

  color: #756970;
  font-size: 12px;
  line-height: 1.4;
}

.jhytel-footerhub-close {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  color: #610c3a;
  background: #f7eff4;
  border: 1px solid #e3d3dd;
  border-radius: 50%;

  font-size: 25px;
  line-height: 1;
  text-decoration: none;
}

.jhytel-footerhub-close:hover {
  color: #ffffff;
  background: #610c3a;
  text-decoration: none;
}

/* Modal content */

.jhytel-footerhub-window-content {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: 13px;

  padding: 15px 18px;
}

.jhytel-footerhub-counter-card {
  min-width: 0;
  padding: 13px;

  background: #fcfafb;
  border: 1px solid #e9dfe5;
  border-radius: 11px;
}

.jhytel-footerhub-counter-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 10px;
}

.jhytel-footerhub-counter-header span {
  display: block;

  color: #851758;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jhytel-footerhub-counter-header strong {
  display: block;
  margin-top: 3px;

  color: #35122f;
  font-size: 13px;
}

.jhytel-footerhub-counter-header > a {
  color: #851758;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.jhytel-footerhub-statcounter {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 95px;

  background: #ffffff;
  border: 1px solid #eee5eb;
  border-radius: 8px;
}

.jhytel-footerhub-statcounter img,
.jhytel-footerhub-flagcounter img {
  display: block;

  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.jhytel-footerhub-flagcounter {
  display: block;
  text-align: center;
}

/* Modal footer */

.jhytel-footerhub-window-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 11px 18px;

  background: #fbf8fa;
  border-top: 1px solid #e8dde4;
}

.jhytel-footerhub-window-footer > span {
  color: #83767e;
  font-size: 9px;
}

.jhytel-footerhub-window-footer > a {
  padding: 7px 18px;

  color: #ffffff;
  background: #610c3a;
  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.jhytel-footerhub-window-footer > a:hover {
  color: #ffffff;
  background: #851758;
  text-decoration: none;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 950px) {
  .jhytel-footerhub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .jhytel-footerhub {
    grid-template-columns: 1fr;
  }

  .jhytel-footerhub-card {
    min-height: 88px;
  }

  .jhytel-footerhub-title {
    font-size: 14px;
  }

  .jhytel-footerhub-description,
  .jhytel-footerhub-visitor-button {
    font-size: 11px;
  }

  .jhytel-footerhub-modal {
    align-items: flex-start;
    padding: 8px;
    overflow-y: auto;
  }

  .jhytel-footerhub-window {
    margin: 0 auto;
    border-radius: 14px;
  }

  .jhytel-footerhub-window-content {
    grid-template-columns: 1fr;
  }

  .jhytel-footerhub-window-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .jhytel-footerhub-window-footer > a {
    text-align: center;
  }
}
/* =====================================================
   J-HyTEL INFORMATION ACCORDION
   ===================================================== */

.jhytel-info-accordion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 9px;

  margin: 20px 0;
  padding: 11px;

  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.07), transparent 40%), #ffffff;

  border: 1px solid #e7dce4;
  border-left: 4px solid #610c3a;
  border-radius: 0 14px 14px 0;

  box-shadow: 0 8px 22px rgba(53, 18, 47, 0.08);
}

/* Accordion card */

.jhytel-info-details {
  min-width: 0;

  background: #fcfafb;
  border: 1px solid #e9dfe5;
  border-radius: 10px;

  overflow: hidden;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.jhytel-info-details:hover {
  border-color: #d3b9c9;
  box-shadow: 0 5px 13px rgba(53, 18, 47, 0.08);
}

.jhytel-info-details[open] {
  grid-column: 1 / -1;

  background: #ffffff;
  border-color: #cdaabd;

  box-shadow: 0 8px 18px rgba(53, 18, 47, 0.1);
}

/* Summary */

.jhytel-info-details summary {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 64px;
  padding: 9px 11px;

  cursor: pointer;
  list-style: none;
  user-select: none;
}

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

.jhytel-info-details summary::marker {
  content: "";
}

.jhytel-info-details summary:focus {
  outline: 2px solid rgba(227, 17, 255, 0.4);
  outline-offset: -2px;
}

.jhytel-info-icon {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #ffffff;
  background: linear-gradient(135deg, #851758, #35122f);
  font-size: 18px;
  box-shadow: 0 5px 11px rgba(53, 18, 47, 0.17);
  font-family: "perpetua";
}

.jhytel-info-heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.jhytel-info-heading strong {
  color: #2d46a5;
  font-family: "perpetua";
  font-variant: unicase;
  font-style: italic;
  line-height: 1.3;
  font-weight: 300;
  font-size: 20px;
}

.jhytel-info-heading small {
  display: block;
  margin-top: 3px;
  color: #756970;
  line-height: 1.45;
  font-size: 18px;
}

.jhytel-info-arrow {
  flex: 0 0 auto;

  color: #851758;
  font-size: 15px;
  font-weight: 700;

  transition: transform 0.18s ease;
}

.jhytel-info-details[open] .jhytel-info-arrow {
  transform: rotate(180deg);
}

/* Expanded content */

.jhytel-info-content {
  padding: 14px 17px 16px;
  color: #554950;
  border-top: 1px solid #eee5eb;
  line-height: 1.65;
}

.jhytel-info-content p {
  margin: 0 0 11px;
}

.jhytel-info-content p:last-child {
  margin-bottom: 0;
}

.jhytel-info-content a {
  color: #851758;
  font-weight: 700;
  text-decoration: none;
}

.jhytel-info-content a:hover {
  color: #610c3a;
  text-decoration: underline;
}

/* Article type tags */

.jhytel-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 12px;
}

.jhytel-info-tags span {
  padding: 6px 10px;

  color: #610c3a;
  background: #f8edf5;
  border: 1px solid #ead7e5;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
}

/* Editorial policy */

.jhytel-info-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.jhytel-info-policy {
  padding: 10px 11px;
  font-size: 14px;
  background: #faf7f9;
  border: 1px solid #ede3e9;
  border-radius: 8px;
}

.jhytel-info-policy span {
  display: block;

  color: #851758;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jhytel-info-policy strong {
  display: block;
  margin-top: 4px;
  color: #a85fba;
  /* font-size: 15px; */
  line-height: 1.4;
  font-weight: 300;
}

/* Collaboration */

.jhytel-info-partners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;

  margin: 11px 0;
}

.jhytel-info-partners > a {
  display: flex;
  flex-direction: column;
  padding: 10px 11px;
  background: #faf7f9;
  border: 1px solid #ede3e9;
  border-radius: 8px;
  font-style: italic;
  text-decoration: none;
  font-weight: 300;
}

.jhytel-info-partners > a:hover {
  border-color: #cdaabd;
  text-decoration: none;
}

.jhytel-info-partners span {
  color: #8d7f87;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jhytel-info-partners strong {
  margin-top: 3px;
  color: #610c3a;
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
}

.jhytel-info-partners small {
  margin-top: 3px;
  color: #82757d;
}

.jhytel-info-inclusion {
  padding: 9px 11px;

  background: linear-gradient(90deg, #faf3f8, #ffffff);
  border-left: 3px solid #851758;
  border-radius: 0 7px 7px 0;

  font-size: 11px;
}

/* Responsive */

@media (max-width: 800px) {
  .jhytel-info-accordion {
    grid-template-columns: 1fr;
  }

  .jhytel-info-details[open] {
    grid-column: auto;
  }

  .jhytel-info-policy-grid,
  .jhytel-info-partners {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   AUTHOR INFORMATION AND PUBLISHING TIMELINE
   ========================================================== */

.jh-home-editorial-block {
  overflow: hidden;
  background: var(--jh-white, #ffffff);
  border: 1px solid var(--jh-border, #ead8e4);
  border-radius: 18px;
  box-shadow: var(--jh-shadow, 0 12px 32px rgba(73, 16, 50, 0.08));
}

/* ==========================================================
   SUBMISSION FEE: PAYMENT ICON AND ACTION BUTTON
   ========================================================== */

.jh-home-fee-banner {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
}

/* Payment icon */

.jh-home-fee-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #ffffff;
  background: linear-gradient(145deg, #237153 0%, #155940 100%);
  border: 5px solid rgba(35, 113, 83, 0.13);
  border-radius: 50%;
  box-shadow:
    0 8px 18px rgba(20, 86, 62, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.jh-home-fee-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* APC button */

.jh-home-fee-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 210px;
  min-height: 52px;
  padding: 0 18px;
  color: #ffffff !important;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  background: linear-gradient(135deg, #237153 0%, #155940 100%);
  border: 1px solid #155940;
  border-radius: 2px;
  box-shadow: 0 9px 20px rgba(20, 86, 62, 0.2);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.jh-home-fee-action-arrow {
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.jh-home-fee-action:hover,
.jh-home-fee-action:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(135deg, #195f46 0%, #0e4733 100%);
  box-shadow: 0 12px 25px rgba(20, 86, 62, 0.27);
  transform: translateY(-2px);
}

.jh-home-fee-action:hover .jh-home-fee-action-arrow,
.jh-home-fee-action:focus-visible .jh-home-fee-action-arrow {
  transform: translateX(4px);
}

.jh-home-fee-action:focus-visible {
  outline: 3px solid rgba(35, 113, 83, 0.22);
  outline-offset: 3px;
}

/* Tablet and mobile */

@media (max-width: 820px) {
  .jh-home-fee-banner {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .jh-home-fee-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .jh-home-fee-banner {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
  }

  .jh-home-fee-icon {
    width: 50px;
    height: 50px;
    border-width: 4px;
  }

  .jh-home-fee-icon svg {
    width: 26px;
    height: 26px;
  }

  .jh-home-fee-action {
    min-width: 0;
    min-height: 50px;
  }
}

/* ==========================================================
   COMPACT AUTHOR RESOURCES
   ========================================================== */

.jh-author-tools {
  display: grid;
  gap: 13px;
  margin: 22px 0;
}

/* Resource row */

.jh-author-tool-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 18px 22px;
  overflow: hidden;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 64%, #fff5fc 100%);
  border: 1px solid #ead8e4;
  border-left: 4px solid #68033c;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 7px 18px rgba(74, 9, 47, 0.06);
}

/* Circular icon */

.jh-author-tool-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #ffffff;
  background: linear-gradient(145deg, #790746, #51022e);
  border-radius: 50%;
  box-shadow: 0 7px 15px rgba(81, 2, 46, 0.22);
}

.jh-author-tool-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jh-author-tool-icon-text {
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Text */

.jh-author-tool-content {
  min-width: 0;
}

.jh-author-tool-label {
  display: block;
  margin-bottom: 2px;
  color: #790746;
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.jh-author-tool-content h3 {
  margin: 0;
  color: #30252c;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
}

.jh-author-tool-content p {
  max-width: 650px;
  margin: 5px 0 0;
  color: #74666f;
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Actions */

.jh-author-tool-actions {
  display: grid;
  gap: 7px;
  width: 196px;
}

.jh-author-tool-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 43px;
  padding: 9px 14px;
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  border-radius: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.jh-author-tool-button-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #790746, #51022e);
  border: 1px solid #51022e;
  box-shadow: 0 6px 14px rgba(81, 2, 46, 0.17);
}

.jh-author-tool-button-primary:hover,
.jh-author-tool-button-primary:focus-visible {
  color: #ffffff !important;
  background: #430126;
  box-shadow: 0 9px 18px rgba(81, 2, 46, 0.25);
  transform: translateY(-1px);
}

.jh-author-tool-button-secondary {
  justify-content: center;
  color: #790746 !important;
  background: #ffffff;
  border: 1px solid #ddc5d4;
}

.jh-author-tool-button-secondary:hover,
.jh-author-tool-button-secondary:focus-visible {
  color: #51022e !important;
  background: #fff5fc;
  border-color: #790746;
}

.jh-author-tool-button:focus-visible {
  outline: 3px solid rgba(121, 7, 70, 0.18);
  outline-offset: 3px;
}

/* Responsive */

@media (max-width: 760px) {
  .jh-author-tool-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .jh-author-tool-actions {
    grid-column: 1 / -1;
    width: 100%;
    padding-left: 66px;
  }
}

@media (max-width: 520px) {
  .jh-author-tool-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    min-height: 0;
    padding: 17px;
  }

  .jh-author-tool-icon {
    width: 42px;
    height: 42px;
  }

  .jh-author-tool-icon svg {
    width: 21px;
    height: 21px;
  }

  .jh-author-tool-content h3 {
    font-size: 1.15rem;
  }

  .jh-author-tool-actions {
    padding-left: 0;
  }
}

/* ============================================================
   J-HyTEL HOMEPAGE SECTIONS
   Add this file through:
   Website Settings > Appearance > Advanced > Journal style sheet
   ============================================================ */

.jhsuite-root {
  --jh-burgundy: #790746;
  --jh-burgundy-dark: #51022e;
  --jh-burgundy-deep: #430126;
  --jh-blush: #fff6fc;
  --jh-blush-soft: #fffbfd;
  --jh-pink-border: #ead8e4;
  --jh-green: #237153;
  --jh-green-dark: #155940;
  --jh-green-deep: #0e4733;
  --jh-green-soft: #f3faf6;
  --jh-green-border: #d2e7dc;
  --jh-gold: #c69a48;
  --jh-ink: #30252c;
  --jh-muted: #74666f;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  color: var(--jh-ink);
  font-family: "NexusSansTF-Regular", Arial, sans-serif;
  text-align: left;
}

.jhsuite-root,
.jhsuite-root *,
.jhsuite-root *::before,
.jhsuite-root *::after {
  box-sizing: border-box;
}

.jhsuite-root h2,
.jhsuite-root h3,
.jhsuite-root p,
.jhsuite-root dl,
.jhsuite-root dt,
.jhsuite-root dd {
  word-spacing: normal;
  text-align: left;
  font-family: "Perpetua";
}

.jhsuite-section {
  margin: 0;
}

/*
 * Vertical rhythm is controlled in one direction only. This prevents the
 * bottom margin of one section from being added to the top margin of the next.
 */
.jhsuite-root > .jhsuite-section:first-child,
.jhsuite-root > .jhsuite-section + .jhsuite-section {
  margin-top: clamp(24px, 3vw, 32px);
}

.jhsuite-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: end;
  gap: 30px;
  margin-bottom: 18px;
}

.jhsuite-section-heading h2,
.jhsuite-timeline-heading h2 {
  margin: 2px 0 0;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.08;
  font-variant: unicase;
  font-style: italic;
}

.jhsuite-section-heading > p,
.jhsuite-timeline-heading > div > p {
  margin: 0;
  color: var(--jh-muted);
  font-size: 0.88rem;
  line-height: 1.58;
}

.jhsuite-kicker,
.jhsuite-cfp-kicker {
  display: block;
  margin: 0 0 4px;
  color: var(--jh-burgundy);
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.35;
  font-variant: unicase;
  font-style: italic;
}

.jhsuite-kicker-green {
  color: var(--jh-green-dark);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.35;
  font-variant: unicase;
  font-style: italic;
}

/* ============================================================
   SHARED BUTTONS
   ============================================================ */

.jhsuite-root .jhsuite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 45px;
  padding: 10px 16px;
  font-family: "Perpetua", Georgia, serif;
  font-weight: 300;
  line-height: 1.15;
  text-decoration: none !important;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.jhsuite-root .jhsuite-btn:hover,
.jhsuite-root .jhsuite-btn:focus-visible {
  text-decoration: none !important;
  transform: translateY(-2px);
}

.jhsuite-root .jhsuite-btn:focus-visible {
  outline: 3px solid rgba(121, 7, 70, 0.2);
  outline-offset: 3px;
}

.jhsuite-btn-arrow {
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.jhsuite-btn:hover .jhsuite-btn-arrow,
.jhsuite-btn:focus-visible .jhsuite-btn-arrow {
  transform: translateX(3px);
}

.jhsuite-root .jhsuite-btn-green {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--jh-green), var(--jh-green-dark));
  border-color: var(--jh-green-dark);
  box-shadow: 0 8px 18px rgba(21, 89, 64, 0.18);
}

.jhsuite-root .jhsuite-btn-green:hover,
.jhsuite-root .jhsuite-btn-green:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(135deg, #195f46, var(--jh-green-deep));
  box-shadow: 0 11px 23px rgba(21, 89, 64, 0.25);
}

.jhsuite-root .jhsuite-btn-green:focus-visible {
  outline-color: rgba(35, 113, 83, 0.22);
}

.jhsuite-root .jhsuite-btn-burgundy {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--jh-burgundy), var(--jh-burgundy-dark));
  border-color: var(--jh-burgundy-dark);
  box-shadow: 0 7px 16px rgba(81, 2, 46, 0.16);
}

.jhsuite-root .jhsuite-btn-burgundy:hover,
.jhsuite-root .jhsuite-btn-burgundy:focus-visible {
  color: #ffffff !important;
  background: var(--jh-burgundy-deep);
  box-shadow: 0 10px 21px rgba(81, 2, 46, 0.24);
}

.jhsuite-root .jhsuite-btn-outline {
  color: var(--jh-burgundy) !important;
  background: #ffffff;
  border-color: #d8bccc;
}

.jhsuite-root .jhsuite-btn-outline:hover,
.jhsuite-root .jhsuite-btn-outline:focus-visible {
  color: var(--jh-burgundy-dark) !important;
  background: var(--jh-blush);
  border-color: var(--jh-burgundy);
}

/* ============================================================
   1. AUTHOR SUBMISSION RESOURCES
   ============================================================ */

.jhsuite-apc-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(17px, 3vw, 26px);
  padding: clamp(20px, 3.2vw, 28px);
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(35, 113, 83, 0.1), transparent 35%), linear-gradient(105deg, #ffffff 0%, var(--jh-green-soft) 100%);
  border: 1px solid var(--jh-green-border);
  border-left: 4px solid var(--jh-green);
  border-radius: 0 17px 17px 0;
  box-shadow: 0 9px 24px rgba(21, 89, 64, 0.08);
}

.jhsuite-apc-icon,
.jhsuite-submit-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #ffffff;
  border-radius: 50%;
}

.jhsuite-apc-icon {
  position: relative;
  background: linear-gradient(145deg, var(--jh-green), var(--jh-green-dark));
  border: 4px solid #dbeee4;
  box-shadow: 0 8px 18px rgba(21, 89, 64, 0.2);
}

.jhsuite-apc-icon svg,
.jhsuite-submit-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jhsuite-apc-copy,
.jhsuite-submit-copy {
  min-width: 0;
}

.jhsuite-apc-copy h3,
.jhsuite-submit-copy h3 {
  margin: 0;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-weight: 300;
  line-height: 1.18;
}

.jhsuite-apc-copy p,
.jhsuite-submit-copy p {
  margin: 6px 0 0;
  color: var(--jh-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.jhsuite-apc-copy p {
  max-width: 680px;
}

.jhsuite-apc-button {
  min-width: 196px;
}

/* Template + account/login, visibly one integrated card */

.jhsuite-submit-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  background: linear-gradient(105deg, #ffffff 0%, var(--jh-blush-soft) 100%);
  border: 1px solid var(--jh-pink-border);
  border-left: 4px solid var(--jh-burgundy);
  border-radius: 0 17px 17px 0;
  box-shadow: 0 9px 24px rgba(81, 2, 46, 0.06);
}

.jhsuite-submit-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: clamp(20px, 3vw, 27px);
}

.jhsuite-submit-item + .jhsuite-submit-item {
  border-left: 1px solid var(--jh-pink-border);
}

.jhsuite-submit-icon {
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, var(--jh-burgundy), var(--jh-burgundy-dark));
  box-shadow: 0 7px 16px rgba(81, 2, 46, 0.19);
}

.jhsuite-submit-icon-ojs {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.jhsuite-submit-copy p {
  min-height: 2.5em;
  margin-bottom: 14px;
}

.jhsuite-submit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   2. PUBLISHING TIMELINE
   ============================================================ */

.jhsuite-timeline {
  padding: clamp(2px, 1vw, 8px) 0;
}

.jhsuite-timeline-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.jhsuite-timeline-heading > div > p {
  margin-top: 10px;
}

.jhsuite-review-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 16px;
  color: var(--jh-burgundy);
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.06em;
  font-variant: unicase;
  background: var(--jh-blush);
  border: 1px solid var(--jh-pink-border);
  border-radius: 999px;
  font-style: italic;
}

.jhsuite-timeline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  font-family: "perpetua";
}

.jhsuite-timeline-card {
  min-width: 0;
  padding: clamp(20px, 2.8vw, 26px);
  background: linear-gradient(145deg, var(--jh-blush) 0%, #fff9fd 100%);
  border: 1px solid var(--jh-pink-border);
  border-radius: 15px;
}

.jhsuite-timeline-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--jh-pink-border);
}

.jhsuite-timeline-number {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
  background: var(--jh-burgundy);
  border-radius: 50%;
}

.jhsuite-timeline-metric strong {
  color: var(--jh-burgundy);
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 300;
  line-height: 1;
}

.jhsuite-timeline-metric > span:last-child {
  align-self: flex-end;
  margin-bottom: 7px;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.92rem;
}

.jhsuite-timeline-copy {
  padding-top: 16px;
}

.jhsuite-timeline-copy h3 {
  margin: 0;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 300;
  line-height: 1.25;
  font-variant: unicase;
  font-style: italic;
}

.jhsuite-timeline-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.3;
}

.jhsuite-timeline-copy p {
  margin: 9px 0 0;
  color: var(--jh-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.jhsuite-timeline-note {
  margin: 16px 0 0;
  color: var(--jh-muted);
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.55;
}

/* ============================================================
   3. COMPACT CALL FOR PAPERS
   ============================================================ */

.jhsuite-cfp {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.85fr);
  overflow: hidden;
  background: var(--jh-blush);
  border: 1px solid var(--jh-pink-border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(81, 2, 46, 0.08);
}

.jhsuite-cfp-main {
  padding: clamp(25px, 4vw, 36px);
  color: #ffffff;
  background: radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.08), transparent 38%), linear-gradient(135deg, var(--jh-burgundy) 0%, #650239 100%);
}

/* Activate the balanced text-and-cover layout only when the cover has
   actually been moved into the burgundy panel. The legacy markup therefore
   remains usable without creating an empty cover column. */
.jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(146px, 15vw, 178px);
  grid-template-areas:
    "status cover"
    "kicker cover"
    "title cover"
    "desc cover"
    "topics cover";
  align-content: center;
  align-items: start;
  column-gap: clamp(22px, 3vw, 34px);
  row-gap: 7px;
}

.jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) .jhsuite-cfp-status {
  grid-area: status;
  justify-self: start;
}

.jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) .jhsuite-cfp-kicker {
  grid-area: kicker;
}

.jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) .jhsuite-cfp-title-row {
  grid-area: title;
  grid-template-columns: minmax(140px, 0.9fr) minmax(130px, 1.1fr);
  gap: 17px;
}

.jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) .jhsuite-cfp-description {
  grid-area: desc;
}

.jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) .jhsuite-cfp-topics {
  grid-area: topics;
}

.jhsuite-cfp-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 16px;
  color: var(--jh-burgundy);
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.06em;
  font-variant: unicase;
  background: var(--jh-blush);
  border: 1px solid var(--jh-pink-border);
  border-radius: 999px;
  font-style: italic;
  margin-bottom: 15px;
}

.jhsuite-cfp-kicker {
  color: #f5d8e8;
}

.jhsuite-cfp-title-row {
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(220px, 1fr);
  align-items: end;
  gap: 24px;
}

.jhsuite-cfp-title-row h2 {
  margin: 0;
  color: #ffffff;
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.9rem, 3.6vw, 2.65rem);
  font-weight: 400;
  line-height: 1.04;
}

.jhsuite-cfp-date {
  margin: 5px 0 0;
  color: #f6e8f0;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1rem;
}

.jhsuite-cfp-theme {
  margin: 0;
  padding-left: 20px;
  color: #ffffff;
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.15;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
}

.jhsuite-cfp-description {
  max-width: 760px;
  margin: 17px 0 0;
  color: #f8eaf2;
  font-size: 0.82rem;
  line-height: 1.6;
}

.jhsuite-cfp-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.jhsuite-cfp-topics span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  color: #ffffff;
  font-weight: 300;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 999px;
}

.jhsuite-cfp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.jhsuite-root .jhsuite-btn-light {
  color: var(--jh-burgundy-dark) !important;
  background: #ffffff;
  border-color: #ffffff;
}

.jhsuite-root .jhsuite-btn-light:hover,
.jhsuite-root .jhsuite-btn-light:focus-visible {
  color: var(--jh-burgundy-deep) !important;
  background: #fff3fa;
  border-color: #fff3fa;
}

.jhsuite-root .jhsuite-btn-ghost {
  color: #ffffff !important;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}

.jhsuite-root .jhsuite-btn-ghost:hover,
.jhsuite-root .jhsuite-btn-ghost:focus-visible {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.jhsuite-cfp-aside {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.4vw, 32px);
  background: radial-gradient(circle at 100% 100%, rgba(121, 7, 70, 0.08), transparent 40%), linear-gradient(150deg, #ffffff 0%, var(--jh-blush) 100%);
}

/* Action buttons occupy the light panel after the cover is moved. */
.jhsuite-cfp-aside .jhsuite-cfp-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin: 18px 0 0;
}

.jhsuite-cfp-aside .jhsuite-cfp-actions .jhsuite-btn {
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
}

.jhsuite-root .jhsuite-cfp-aside .jhsuite-btn-light {
  color: #ffffff !important;
  background: var(--jh-burgundy);
  border-color: var(--jh-burgundy);
}

.jhsuite-root .jhsuite-cfp-aside .jhsuite-btn-light:hover,
.jhsuite-root .jhsuite-cfp-aside .jhsuite-btn-light:focus-visible {
  color: #ffffff !important;
  background: var(--jh-burgundy-dark);
  border-color: var(--jh-burgundy-dark);
}

.jhsuite-root .jhsuite-cfp-aside .jhsuite-btn-ghost {
  color: var(--jh-burgundy) !important;
  background: #ffffff;
  border-color: #cda9bc;
}

.jhsuite-root .jhsuite-cfp-aside .jhsuite-btn-ghost:hover,
.jhsuite-root .jhsuite-cfp-aside .jhsuite-btn-ghost:focus-visible {
  color: var(--jh-burgundy-dark) !important;
  background: #fff5fa;
  border-color: var(--jh-burgundy);
}

.jhsuite-cfp-aside h3 {
  margin: 0;
  padding-bottom: 11px;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.15;
  border-bottom: 2px solid var(--jh-burgundy);
}

.jhsuite-cfp-facts {
  margin: 11px 0 0;
}

.jhsuite-cfp-facts > div {
  display: grid;
  grid-template-columns: minmax(84px, 0.82fr) minmax(0, 1.18fr);
  gap: 10px;
  padding: 4px 0;
}

.jhsuite-cfp-facts dt,
.jhsuite-cfp-facts dd {
  margin: 0;
  font-size: 0.77rem;
  line-height: 1.35;
}

.jhsuite-cfp-facts dt {
  color: var(--jh-muted);
}

.jhsuite-cfp-facts dd {
  color: var(--jh-ink);
  font-weight: 600;
}

.jhsuite-open-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  background: var(--jh-green);
  border-radius: 50%;
}

.jhsuite-cfp-note {
  margin-top: 15px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--jh-pink-border);
  border-left: 3px solid var(--jh-gold);
}

.jhsuite-cfp-note strong {
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.98rem;
}

.jhsuite-cfp-note p {
  margin: 4px 0 0;
  color: var(--jh-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE: TABLET
   ============================================================ */

@media (max-width: 900px) {
  .jhsuite-section-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .jhsuite-apc-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .jhsuite-apc-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .jhsuite-submit-card,
  .jhsuite-cfp {
    grid-template-columns: minmax(0, 1fr);
  }

  .jhsuite-submit-item + .jhsuite-submit-item {
    border-top: 1px solid var(--jh-pink-border);
    border-left: 0;
  }

  .jhsuite-timeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jhsuite-timeline-card:last-child {
    grid-column: 1 / -1;
  }

  .jhsuite-cfp-title-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) {
    grid-template-columns: minmax(0, 1fr) 142px;
    column-gap: 22px;
  }
}

/* ============================================================
   RESPONSIVE: MOBILE
   ============================================================ */

@media (max-width: 620px) {
  .jhsuite-root > .jhsuite-section:first-child,
  .jhsuite-root > .jhsuite-section + .jhsuite-section {
    margin-top: 22px;
  }

  .jhsuite-apc-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .jhsuite-apc-icon {
    width: 46px;
    height: 46px;
    border-width: 3px;
  }

  .jhsuite-apc-icon svg {
    width: 23px;
    height: 23px;
  }

  .jhsuite-submit-item {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    padding: 18px;
  }

  .jhsuite-submit-icon {
    width: 44px;
    height: 44px;
  }

  .jhsuite-submit-icon svg {
    width: 22px;
    height: 22px;
  }

  .jhsuite-submit-copy p {
    min-height: 0;
  }

  .jhsuite-submit-actions {
    display: grid;
  }

  .jhsuite-submit-actions .jhsuite-btn,
  .jhsuite-submit-copy > .jhsuite-btn {
    width: 100%;
  }

  .jhsuite-timeline-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .jhsuite-timeline-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .jhsuite-timeline-card:last-child {
    grid-column: auto;
  }

  .jhsuite-cfp-title-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .jhsuite-cfp-theme {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 0;
  }

  .jhsuite-cfp-actions {
    display: grid;
  }

  .jhsuite-cfp-actions .jhsuite-btn {
    width: 100%;
  }

  .jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "status"
      "kicker"
      "title"
      "desc"
      "topics"
      "cover";
    row-gap: 7px;
  }

  .jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) .jhsuite-cfp-title-row {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .jhsuite-cfp-main:has(> .jhsuite-upcoming-cover) .jhsuite-upcoming-cover {
    justify-self: center;
    margin-top: 17px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .jhsuite-root .jhsuite-btn,
  .jhsuite-root .jhsuite-btn-arrow {
    transition: none;
  }
}

/* ============================================================
   PUBLISHING TIMELINE: THREE STAGE COLOURS
   ============================================================ */

/* Stage colour variables */

.jhsuite-stage-one {
  --jhsuite-stage-accent: #237153;
  --jhsuite-stage-background: #f1f9f5;
  --jhsuite-stage-background-end: #fbfefc;
  --jhsuite-stage-border: #cbe2d7;
  --jhsuite-stage-shadow: rgba(35, 113, 83, 0.1);
}

.jhsuite-stage-two {
  --jhsuite-stage-accent: #790746;
  --jhsuite-stage-background: #fff3fa;
  --jhsuite-stage-background-end: #fffafd;
  --jhsuite-stage-border: #ead2e0;
  --jhsuite-stage-shadow: rgba(121, 7, 70, 0.1);
}

.jhsuite-stage-three {
  --jhsuite-stage-accent: #946312;
  --jhsuite-stage-background: #fff8e9;
  --jhsuite-stage-background-end: #fffdf7;
  --jhsuite-stage-border: #ead9ae;
  --jhsuite-stage-shadow: rgba(148, 99, 18, 0.11);
}

/* Coloured cards */

.jhsuite-timeline-card {
  background: linear-gradient(145deg, var(--jhsuite-stage-background) 0%, var(--jhsuite-stage-background-end) 100%);
  border-color: var(--jhsuite-stage-border);
  box-shadow: 0 8px 20px var(--jhsuite-stage-shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.jhsuite-timeline-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px var(--jhsuite-stage-shadow);
}

/* Divider follows each stage colour */

.jhsuite-timeline-metric {
  border-bottom-color: var(--jhsuite-stage-border);
}

/* Replace circular number with stage label */

.jhsuite-timeline-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 32px;
  padding: 7px 12px;
  color: #ffffff;
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.045em;
  font-variant: unicase;
  font-style: italic;
  white-space: nowrap;
  background: var(--jhsuite-stage-accent);
  border-radius: 999px;
  box-shadow: 0 5px 12px var(--jhsuite-stage-shadow);
}

/* Time and heading follow each stage colour */

.jhsuite-timeline-metric strong,
.jhsuite-timeline-copy h3 {
  color: var(--jhsuite-stage-accent);
}

/* Small-screen adjustment */

@media (max-width: 380px) {
  .jhsuite-timeline-metric {
    gap: 8px;
  }

  .jhsuite-timeline-number {
    min-height: 29px;
    padding: 6px 9px;
    font-size: 0.61rem;
  }

  .jhsuite-timeline-metric strong {
    font-size: 1.7rem;
  }
}

/* Upcoming issue cover */

.jhsuite-upcoming-cover {
  display: block;
  width: 120px;
  height: auto;
  margin: 4px auto 16px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 0;
  background: transparent;
  border: 1px solid #ead8e4;
  box-shadow: 0 9px 20px rgba(81, 2, 46, 0.14);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.jhsuite-upcoming-cover img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: initial !important;
  vertical-align: top;
}

.jhsuite-cfp-main .jhsuite-upcoming-cover {
  grid-area: cover;
  align-self: center;
  justify-self: end;
  width: clamp(146px, 15vw, 178px);
  margin: 0;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 13px 28px rgba(36, 0, 20, 0.3);
}

.jhsuite-cfp-main .jhsuite-upcoming-cover:hover,
.jhsuite-cfp-main .jhsuite-upcoming-cover:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(36, 0, 20, 0.38);
}

/* Kurangi jarak antara Timeline dan Call for Papers */

.jhsuite-timeline {
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

.jhsuite-timeline-note {
  margin-bottom: 0 !important;
}

/* Stage di atas, durasi di tengah bawahnya */

.jhsuite-timeline-metric {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  row-gap: 10px;
  min-height: 102px;
  padding-bottom: 16px;
  text-align: center;
  font-family: "Perpetua";
}

.jhsuite-timeline-number {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
}

.jhsuite-timeline-metric strong {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}

.jhsuite-timeline-metric > span:last-child {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  margin: 0;
}

/* ============================================================
   ABSTRACTING AND INDEXING
   ============================================================ */

.jhytel-indexing,
.jhytel-indexing * {
  box-sizing: border-box;
}

.jhytel-indexing {
  width: 100%;
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: clamp(24px, 4vw, 38px);
  background: linear-gradient(145deg, #ffffff 0%, #fbf7fa 100%);
  border: 1px solid #eadde5;
  border-top: 4px solid #790746;
  border-radius: 0 18px 18px 0;
  box-shadow: 0 14px 35px rgba(61, 30, 48, 0.08);
}

.jhytel-indexing-header {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

.jhytel-indexing-kicker {
  display: block;
  margin: 0 0 5px;
  color: #176b4d;
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.12em;
  font-variant: unicase;
}

.jhytel-indexing-header h2 {
  margin: 0;
  padding: 0;
  color: #30252c;
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1.1;
  text-align: center;
  font-variant: unicase;
  font-style: italic;
}

.jhytel-indexing-header p {
  margin: 9px auto 0;
  color: #6d6068;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1rem;
  line-height: 1.55;
  text-align: center;
}

.jhytel-indexing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 12px;
  align-items: stretch;
}

.jhytel-indexing-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 88px;
  padding: 14px 15px;
  overflow: hidden;
  color: #30252c !important;
  background: linear-gradient(135deg, #ffffff 0%, #fffafd 100%);
  border: 1px solid #e6d9e1;
  border-radius: 9px;
  box-shadow: 0 5px 14px rgba(61, 30, 48, 0.05);
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.jhytel-indexing-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #790746;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.jhytel-indexing-item:hover,
.jhytel-indexing-item:focus {
  color: #30252c !important;
  transform: translateY(-3px);
  border-color: #cdaabd;
  box-shadow: 0 10px 22px rgba(121, 7, 70, 0.11);
}

.jhytel-indexing-item:hover::before,
.jhytel-indexing-item:focus::before {
  transform: scaleY(1);
}

.jhytel-indexing-item:focus-visible {
  outline: 3px solid rgba(23, 107, 77, 0.24);
  outline-offset: 3px;
}

.jhytel-indexing-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 56px;
  color: #790746;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  font-style: italic;
  font-variant-caps: unicase;
  font-feature-settings: "unic" 1;
  line-height: 1;
  letter-spacing: -0.035em;
  background: #f8eef4;
  border-right: 1px solid #d9becd;
  border-radius: 5px 0 0 5px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.jhytel-indexing-item:hover .jhytel-indexing-monogram,
.jhytel-indexing-item:focus .jhytel-indexing-monogram {
  color: #ffffff;
  background: #790746;
}

.jhytel-indexing-copy {
  display: block;
  min-width: 0;
}

.jhytel-indexing-copy strong {
  display: block;
  color: #30252c;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
}

.jhytel-indexing-copy small {
  display: block;
  margin-top: 5px;
  color: #176b4d;
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.74rem;
  font-weight: 600;
  font-style: italic;
  font-variant-caps: unicase;
  line-height: 1.25;
  letter-spacing: 0.025em;
}

.jhytel-indexing-arrow {
  color: #a78c9b;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1;
  text-align: right;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.jhytel-indexing-item:hover .jhytel-indexing-arrow,
.jhytel-indexing-item:focus .jhytel-indexing-arrow {
  color: #790746;
  transform: translate(2px, -2px);
}

/* Backward compatibility for an older card that still contains only a logo. */
.jhytel-indexing-item:has(> img) {
  display: flex !important;
  justify-content: center;
}

.jhytel-indexing-item > img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 58px;
  margin: 0 auto !important;
  object-fit: contain;
}

@media (max-width: 700px) {
  .jhytel-indexing {
    padding: 24px 20px;
    border-radius: 0 14px 14px 0;
  }

  .jhytel-indexing-header {
    margin-bottom: 22px;
  }

  .jhytel-indexing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .jhytel-indexing-item {
    grid-template-columns: 60px minmax(0, 1fr) 18px;
    min-height: 82px;
    padding: 12px;
  }

  .jhytel-indexing-monogram {
    width: 60px;
    height: 52px;
    font-size: 1.62rem;
  }
}

@media (max-width: 480px) {
  .jhytel-indexing {
    padding: 21px 15px;
  }

  .jhytel-indexing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .jhytel-indexing-item {
    grid-template-columns: 58px minmax(0, 1fr) 18px;
    min-height: 80px;
    padding: 12px;
  }

  .jhytel-indexing-monogram {
    width: 58px;
    height: 50px;
    font-size: 1.55rem;
  }
}

/* ============================================================
   J-HyTEL CONNECT BAR
   Publisher | Journal Audio | Visitor Actions
   ============================================================ */

.jhytel-connectbar,
.jhytel-connectbar * {
  box-sizing: border-box;
}

.jhytel-connectbar {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(0, 1.08fr)
    minmax(200px, 0.76fr);
  align-items: stretch;
  gap: clamp(16px, 2.2vw, 24px);
  width: 100%;
  max-width: 100%;
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: clamp(18px, 2.7vw, 26px);
  overflow: hidden;
  background: linear-gradient(110deg, #ffffff 0%, #fffafd 60%, #fcedfa 100%);
  border: 1px solid #eadde5;
  border-left: 4px solid #790746;
  border-radius: 0 18px 18px 0;
  box-shadow: 0 12px 30px rgba(61, 30, 48, 0.08);
}

.jhytel-connectbar-intro,
.jhytel-connectbar-item,
.jhytel-connectbar-heading,
.jhytel-connectbar-item-text,
.jhytel-connectbar-actions {
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
}

/* Publisher and audio columns */

.jhytel-connectbar-intro,
.jhytel-connectbar-audio {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 4px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.jhytel-connectbar-audio {
  padding-left: clamp(16px, 2vw, 22px) !important;
  border-left: 1px solid #e5d6df !important;
}

.jhytel-connectbar-main-icon,
.jhytel-connectbar-round-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0;
  color: #ffffff;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(145deg, #9b0b68 0%, #51032f 100%);
  border: 1px solid rgba(121, 7, 70, 0.32);
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(121, 7, 70, 0.2);
}

.jhytel-connectbar-heading,
.jhytel-connectbar-item-text {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  font-family: "perpetua";
}

.jhytel-connectbar-kicker,
.jhytel-connectbar-item-text > span {
  display: block;
  margin: 0 0 3px;
  color: #176b4d;
  font-family: "perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.09em;
  font-variant: unicase;
  font-style: italic;
}

.jhytel-connectbar-publisher,
.jhytel-connectbar-item-text > strong {
  display: block;
  margin: 0;
  color: #30252c !important;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 300;
  line-height: 1.22;
  font-style: italic;
  text-decoration: none !important;
}

.jhytel-connectbar-publisher:hover,
.jhytel-connectbar-publisher:focus {
  color: #790746 !important;
  text-decoration: underline !important;
}

.jhytel-connectbar-heading p {
  margin: 5px 0 3px;
  color: #6d6068;
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.34;
}

.jhytel-connectbar-email {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  color: #790746 !important;
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.35;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}

.jhytel-connectbar-email:hover,
.jhytel-connectbar-email:focus {
  text-decoration: underline !important;
}

/* Native audio player */

.jhytel-connectbar-audio audio {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  margin: 8px 0 0 !important;
  border-radius: 999px;
  outline: 0;
  accent-color: #790746;
}

.jhytel-connectbar-audio audio::-webkit-media-controls-enclosure {
  background: #f0f1f1;
  border-radius: 999px;
}

/* Right-side buttons */

.jhytel-connectbar-actions {
  display: grid !important;
  grid-template-rows: repeat(2, minmax(45px, 1fr));
  align-self: stretch;
  gap: 8px;
  width: 100%;
}

.jhytel-connectbar-button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100% !important;
  min-height: 45px;
  margin: 0 !important;
  padding: 11px 15px !important;
  font-family: "Perpetua", Georgia, serif;
  line-height: 1.2;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.jhytel-connectbar-button > span:first-child {
  min-width: 0;
}

.jhytel-connectbar-button > span:last-child {
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

.jhytel-connectbar-button-primary {
  color: #ffffff !important;
  background: #790746 !important;
  border: 1px solid #790746 !important;
  box-shadow: 0 6px 14px rgba(121, 7, 70, 0.16);
  font-family: "perpetua";
}

.jhytel-connectbar-button-primary:hover,
.jhytel-connectbar-button-primary:focus {
  color: #ffffff !important;
  background: #560330 !important;
  border-color: #560330 !important;
  transform: translateY(-1px);
}

.jhytel-connectbar-button-secondary {
  color: #790746 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid #dcbfd0 !important;
  font-family: "perpetua";
}

.jhytel-connectbar-button-secondary:hover,
.jhytel-connectbar-button-secondary:focus {
  color: #ffffff !important;
  background: #790746 !important;
  border-color: #790746 !important;
  transform: translateY(-1px);
}

.jhytel-connectbar a:focus-visible,
.jhytel-visitors-popup a:focus-visible {
  outline: 3px solid rgba(23, 107, 77, 0.25);
  outline-offset: 3px;
}

/* ============================================================
   VISITOR STATISTICS POPUP
   ============================================================ */

.jhytel-visitors-popup,
.jhytel-visitors-popup * {
  box-sizing: border-box;
}

.jhytel-visitors-popup {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    visibility 0.2s ease,
    opacity 0.2s ease;
}

.jhytel-visitors-popup:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.jhytel-visitors-popup-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  background: rgba(24, 9, 22, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.jhytel-visitors-popup-window {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: #ffffff;
  border: 1px solid #eadde5;
  border-top: 4px solid #790746;
  border-radius: 0 18px 18px 0;
  box-shadow: 0 25px 75px rgba(24, 9, 22, 0.4);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.2s ease;
}

.jhytel-visitors-popup:target .jhytel-visitors-popup-window {
  transform: translateY(0) scale(1);
}

.jhytel-visitors-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 17px;
  background: linear-gradient(110deg, #ffffff 0%, #fffafd 65%, #fcedfa 100%);
  border-bottom: 1px solid #eadfe7;
}

.jhytel-visitors-popup-heading {
  min-width: 0;
}

.jhytel-visitors-kicker,
.jhytel-visitors-stat-label {
  display: block;
  color: #176b4d;
  font-family: "perpetua", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.jhytel-visitors-popup-header h2 {
  margin: 4px 0;
  color: #35122f;
  font-size: 20px;
  font-family: "perpetua";
  font-variant: unicase;
  font-style: italic;
  line-height: 1.2;
}

.jhytel-visitors-popup-header p {
  max-width: 680px;
  margin: 0;
  color: #6d6068;
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.96rem;
  line-height: 1.45;
}

.jhytel-visitors-popup-close {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #790746 !important;
  background: #ffffff;
  border: 1px solid #decbd7;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none !important;
}

.jhytel-visitors-popup-close:hover,
.jhytel-visitors-popup-close:focus {
  color: #ffffff !important;
  background: #790746;
  border-color: #790746;
}

.jhytel-visitors-popup-content {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.jhytel-visitors-stat-section {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(300px, 1.28fr);
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  padding: 15px;
  background: #fcfafb;
  border: 1px solid #e8dde4;
  border-radius: 10px;
}

.jhytel-visitors-stat-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jhytel-visitors-stat-copy h3 {
  margin: 3px 0 0;
  color: #35122f;
  font-size: 20px;
  font-family: "perpetua";
  font-variant: unicase;
  font-style: italic;
  line-height: 1.2;
}

.jhytel-visitors-stat-copy p {
  margin: 7px 0 10px;
  color: #6d6068;
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.94rem;
  line-height: 1.42;
}

.jhytel-visitors-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: auto;
  color: #851758 !important;
  font-size: 16px !important;
  text-decoration: none;
  font-variant: unicase;
  font-family: "perpetua";
}

.jhytel-visitors-detail-link:hover,
.jhytel-visitors-detail-link:focus {
  text-decoration: underline !important;
}

.jhytel-visitors-data-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ece3e9;
  border-radius: 8px;
  text-decoration: none !important;
}

.jhytel-visitors-data-box img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 260px;
  margin: 0 auto !important;
  object-fit: contain;
}

.jhytel-visitors-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: #fbf8fa;
  border-top: 1px solid #e8dde4;
}

.jhytel-visitors-popup-footer p {
  margin: 0;
  color: #83767e;
  font-family: "Perpetua", Arial, sans-serif;
  line-height: 1.4;
}

.jhytel-visitors-popup-footer > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 16px;
  color: #ffffff !important;
  background: #790746;
  border: 1px solid #790746;
  font-family: "Perpetua", Arial, sans-serif;
  line-height: 1.2;
  text-decoration: none !important;
}

.jhytel-visitors-popup-footer > a:hover,
.jhytel-visitors-popup-footer > a:focus {
  color: #ffffff !important;
  background: #560330;
  border-color: #560330;
}

.jhytel-visitors-close-target {
  display: none;
}

/* Tablet */

@media (max-width: 900px) {
  .jhytel-connectbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jhytel-connectbar-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .jhytel-connectbar-button {
    min-height: 48px;
  }
}

/* Mobile */

@media (max-width: 640px) {
  .jhytel-connectbar {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 19px 16px;
    border-radius: 0 14px 14px 0;
  }

  .jhytel-connectbar-intro,
  .jhytel-connectbar-audio {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .jhytel-connectbar-audio {
    padding: 15px 0 0 !important;
    border-top: 1px solid #e5d6df !important;
    border-left: 0 !important;
  }

  .jhytel-connectbar-main-icon,
  .jhytel-connectbar-round-icon {
    width: 46px;
    height: 46px;
  }

  .jhytel-connectbar-actions {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .jhytel-visitors-popup {
    align-items: flex-start;
    padding: 8px;
    overflow-y: auto;
  }

  .jhytel-visitors-popup-window {
    max-height: none;
    margin: 0 auto;
    border-radius: 0 14px 14px 0;
  }

  .jhytel-visitors-popup-header {
    padding: 17px 16px 14px;
  }

  .jhytel-visitors-popup-content {
    padding: 14px;
  }

  .jhytel-visitors-stat-section {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px;
  }

  .jhytel-visitors-popup-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px;
  }
}

@media (max-width: 390px) {
  .jhytel-connectbar-heading p {
    font-size: 0.87rem;
  }

  .jhytel-connectbar-publisher,
  .jhytel-connectbar-item-text > strong {
    font-size: 1.04rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhytel-connectbar-button,
  .jhytel-visitors-popup,
  .jhytel-visitors-popup-window {
    transition: none;
  }
}

/* ============================================================
   FINAL HOMEPAGE RHYTHM AND COMPACT VISIBILITY
   Definitive overrides for the July 2026 homepage revision.
   Publisher and Journal Audio component styling is unchanged.
   ============================================================ */

/* ------------------------------------------------------------
   1. ONE CONSISTENT VERTICAL RHYTHM
   ------------------------------------------------------------ */

.jhsuite-root {
  --jh-home-section-gap: clamp(24px, 3vw, 30px);
}

/* The first Author Resources block retains its existing position. */

.jhsuite-root > .jhsuite-section:first-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Every following section owns only its top gap. */

.jhsuite-root > .jhsuite-section + .jhsuite-section {
  margin-top: var(--jh-home-section-gap) !important;
  margin-bottom: 0 !important;
}

.jhytel-indexing,
.jhytel-connectbar {
  margin-top: clamp(24px, 3vw, 30px) !important;
  margin-bottom: 0 !important;
}

.homepage-additional-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Author Resources and Call for Papers now share the same
   heading-to-container distance. */

.jhsuite-cfp-section > .jhsuite-section-heading,
.jhsuite-cfp-heading {
  margin-bottom: 18px !important;
}

.jhsuite-cfp-heading > p {
  margin: 0 !important;
}

/* ------------------------------------------------------------
   2. BALANCED CALL FOR PAPERS
   ------------------------------------------------------------ */

.jhsuite-cfp-section {
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.jhsuite-cfp-section > .jhsuite-cfp {
  margin: 0 !important;
}

.jhsuite-cfp {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(210px, 0.8fr) !important;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--jh-blush);
  border: 1px solid var(--jh-pink-border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(81, 2, 46, 0.08);
}

.jhsuite-cfp .jhsuite-cfp-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(132px, 13vw, 156px) !important;
  grid-template-areas:
    "status cover"
    "kicker cover"
    "title cover"
    "desc cover" !important;
  align-content: center;
  align-items: start;
  column-gap: clamp(20px, 2.6vw, 28px) !important;
  row-gap: 6px !important;
  min-width: 0;
  min-height: 354px;
  padding: clamp(24px, 3.4vw, 32px) !important;
  color: #ffffff;
  background: radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.09), transparent 40%), linear-gradient(135deg, var(--jh-burgundy) 0%, #650239 100%);
}

.jhsuite-cfp-main > .jhsuite-cfp-status {
  grid-area: status;
  justify-self: start;
  min-height: 38px;
  margin: 0 0 8px !important;
  padding: 7px 14px;
  font-size: 1.05rem;
}

.jhsuite-cfp-main > .jhsuite-cfp-kicker {
  grid-area: kicker;
  margin-bottom: 2px;
}

.jhsuite-cfp-main > .jhsuite-cfp-title-row {
  grid-area: title;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
  gap: 10px !important;
  min-width: 0;
}

.jhsuite-cfp-title-row h2 {
  font-size: clamp(2rem, 3.6vw, 2.55rem);
  line-height: 1.02;
}

.jhsuite-cfp-date {
  margin-top: 6px;
}

.jhsuite-cfp .jhsuite-cfp-theme {
  margin: 0;
  padding: 9px 0 0 !important;
  color: #ffffff;
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  line-height: 1.2;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 0 !important;
}

.jhsuite-cfp-main > .jhsuite-cfp-description {
  grid-area: desc;
  max-width: 44rem;
  margin: 12px 0 0 !important;
  color: #f8eaf2;
  font-size: 0.96rem;
  line-height: 1.52;
}

.jhsuite-cfp-main > .jhsuite-upcoming-cover {
  grid-area: cover;
  align-self: center;
  justify-self: end;
  display: block;
  width: clamp(132px, 13vw, 156px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  line-height: 0;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 13px 28px rgba(36, 0, 20, 0.3);
}

.jhsuite-cfp-main > .jhsuite-upcoming-cover img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: initial !important;
  vertical-align: top;
}

.jhsuite-cfp .jhsuite-cfp-aside {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  min-width: 0;
  min-height: 354px;
  padding: clamp(22px, 2.8vw, 28px) !important;
}

.jhsuite-cfp-aside > .jhsuite-kicker {
  margin-bottom: 4px;
  font-size: 1rem;
}

.jhsuite-cfp-aside h3 {
  padding-bottom: 10px;
  font-size: 1.2rem;
}

.jhsuite-cfp-aside .jhsuite-cfp-actions {
  gap: 9px;
  margin: 15px 0 0 !important;
}

.jhsuite-cfp-aside .jhsuite-cfp-actions .jhsuite-btn {
  min-height: 48px;
  padding: 11px 14px;
}

.jhsuite-cfp-aside .jhsuite-cfp-note {
  margin: 16px 0 0 !important;
  padding: 12px 13px;
}

.jhsuite-cfp-aside .jhsuite-cfp-note p {
  margin-top: 4px;
  font-size: 0.79rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------
   3. MINIMAL JOURNAL VISIBILITY DISCLOSURE
   ------------------------------------------------------------ */

.jhytel-indexing {
  width: 100%;
  padding: clamp(22px, 3.2vw, 30px) !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbf7fa 100%);
  border: 1px solid #eadde5;
  border-top: 4px solid #790746;
  border-radius: 0 18px 18px 0;
  box-shadow: 0 12px 30px rgba(61, 30, 48, 0.07);
}

.jhytel-indexing-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.72fr);
  align-items: end;
  gap: 28px;
  max-width: none !important;
  margin: 0 0 18px !important;
  text-align: left !important;
}

.jhytel-indexing-kicker {
  margin: 0 0 4px;
  color: #176b4d;
  font-family: "Perpetua", Georgia, serif;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  font-variant-caps: unicase;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: none;
}

.jhytel-indexing-header h2 {
  margin: 0;
  color: #30252c;
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  font-variant-caps: unicase;
  line-height: 1.08;
  text-align: left;
}

.jhytel-indexing-header p {
  max-width: 36rem;
  margin: 0 !important;
  color: #6d6068;
  font-family: "Perpetua", Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
}

.jhytel-indexing-disclosure {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #e3d3dc;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(61, 30, 48, 0.04);
}

.jhytel-indexing-disclosure > summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 11px 15px;
  color: #30252c;
  list-style: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.jhytel-indexing-disclosure > summary::-webkit-details-marker {
  display: none;
}

.jhytel-indexing-disclosure > summary::marker {
  content: "";
}

.jhytel-indexing-disclosure > summary:hover,
.jhytel-indexing-disclosure > summary:focus-visible {
  background: #fff6fb;
}

.jhytel-indexing-disclosure > summary:focus-visible {
  outline: 3px solid rgba(23, 107, 77, 0.22);
  outline-offset: -3px;
}

.jhytel-indexing-disclosure[open] > summary {
  background: #fff8fc;
  border-bottom: 1px solid #e3d3dc;
}

.jhytel-indexing-summary-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 48px;
  color: #ffffff;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  font-style: italic;
  font-variant-caps: unicase;
  line-height: 1;
  background: linear-gradient(145deg, #990961 0%, #61033a 100%);
  border-radius: 8px;
  box-shadow: 0 6px 13px rgba(121, 7, 70, 0.17);
}

.jhytel-indexing-summary-copy {
  display: block;
  min-width: 0;
}

.jhytel-indexing-summary-copy strong {
  display: block;
  color: #30252c;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1.16rem;
  font-weight: 300;
  line-height: 1.15;
  font-style: italic;
  font-variant: unicase;
}

.jhytel-indexing-summary-copy small {
  display: block;
  margin-top: 4px;
  color: #176b4d;
  font-family: "Perpetua", Georgia, serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.25;
}

.jhytel-indexing-summary-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 39px;
  padding: 8px 12px;
  color: #790746;
  font-family: "Perpetua", Georgia, serif;
  white-space: nowrap;
  background: #f8edf3;
  border: 1px solid #ddc2d1;
  border-radius: 999px;
  font-weight: 300;
}

.jhytel-indexing-summary-arrow {
  font-family: Arial, sans-serif;
  font-style: normal;
  line-height: 1;
  transition: transform 0.2s ease;
}

.jhytel-indexing-disclosure[open] .jhytel-indexing-summary-arrow {
  transform: rotate(180deg);
}

.jhytel-indexing-disclosure .jhytel-indexing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
  gap: 10px;
  padding: 14px;
}

.jhytel-indexing-disclosure .jhytel-indexing-item {
  grid-template-columns: 54px minmax(0, 1fr) 16px;
  gap: 11px;
  min-height: 72px;
  padding: 10px 11px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(61, 30, 48, 0.04);
}

.jhytel-indexing-disclosure .jhytel-indexing-monogram {
  width: 54px;
  height: 48px;
  font-size: 1.5rem;
}

.jhytel-indexing-disclosure .jhytel-indexing-copy strong {
  font-size: 1.02rem;
}

.jhytel-indexing-disclosure .jhytel-indexing-copy small {
  margin-top: 3px;
  font-size: 0.92rem;
  font-weight: 200;
}

/* ------------------------------------------------------------
   4. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .jhsuite-cfp-heading,
  .jhytel-indexing-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .jhsuite-cfp {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .jhsuite-cfp .jhsuite-cfp-aside {
    min-height: 0;
  }

  .jhsuite-cfp-aside .jhsuite-cfp-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .jhsuite-root {
    --jh-home-section-gap: 22px;
  }

  .jhytel-indexing,
  .jhytel-connectbar {
    margin-top: 22px !important;
  }

  .jhsuite-cfp .jhsuite-cfp-main {
    grid-template-columns: minmax(0, 1fr) 118px !important;
    column-gap: 16px !important;
    min-height: 0;
    padding: 22px 18px !important;
  }

  .jhsuite-cfp-main > .jhsuite-upcoming-cover {
    width: 118px !important;
  }

  .jhsuite-cfp-aside .jhsuite-cfp-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .jhytel-indexing {
    padding: 20px 15px !important;
  }

  .jhytel-indexing-disclosure > summary {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    padding: 10px 12px;
  }

  .jhytel-indexing-summary-mark {
    width: 48px;
    height: 45px;
    font-size: 1.4rem;
  }

  .jhytel-indexing-summary-action {
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    margin-top: 1px;
  }

  .jhytel-indexing-disclosure .jhytel-indexing-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 11px;
  }
}

@media (max-width: 460px) {
  .jhsuite-cfp .jhsuite-cfp-main {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "status"
      "kicker"
      "title"
      "desc"
      "cover" !important;
  }

  .jhsuite-cfp-main > .jhsuite-upcoming-cover {
    justify-self: center;
    width: 132px !important;
    margin-top: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhytel-indexing-disclosure > summary,
  .jhytel-indexing-summary-arrow {
    transition: none;
  }
}

/* =========================================================
   J-HyTEL COMPACT HOMEPAGE PANELS
   Open Access, announcements, and SDGs
   ========================================================= */

.jhytel-home-panels {
  --jh-primary: #610c3a;
  --jh-primary-light: #851758;
  --jh-deep: #35122f;
  --jh-accent: #e311ff;
  --jh-gold: #f2b544;
  --jh-text: #302830;
  --jh-muted: #756873;
  --jh-line: #e3d8df;
  --jh-soft: #faf7f9;

  width: 100%;
  color: var(--jh-text);
  font-family: "NexusSansTF-Regular", "Nexus Sans", Arial, sans-serif;
}

.jhytel-home-panels *,
.jhytel-home-panels *::before,
.jhytel-home-panels *::after {
  box-sizing: border-box;
}

/* Shared compact section */
.jh-panel-section {
  width: min(1120px, calc(100% - 30px));
  margin: 20px auto;
}

.jh-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jh-line);
}

.jh-section-title {
  position: relative;
  margin: 0;
  padding-left: 13px;
  color: var(--jh-deep);
  font-family: "Perpetua", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.2;
  font-style: italic;
  font-variant: unicase;
}

.jh-section-title::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--jh-accent), var(--jh-primary));
  border-radius: 999px;
}

.jh-section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 11px;
  color: var(--jh-primary) !important;
  background: #fff;
  border: 1px solid rgba(97, 12, 58, 0.24);
  border-radius: 999px;
  font-family: "perpetua";
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.035em;
  line-height: 1;
  text-decoration: none !important;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.jh-section-link:hover,
.jh-section-link:focus {
  color: #fff !important;
  background: var(--jh-primary);
  text-decoration: none !important;
  transform: translateY(-2px);
}

.jh-section-link span {
  font-size: 14px;
  transition: transform 0.18s ease;
}

.jh-section-link:hover span,
.jh-section-link:focus span {
  transform: translateX(2px);
}

/* Open Access + editor message */
.jh-access-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.jh-access-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 82px;
  padding: 13px 14px;
  color: #fff !important;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 46%), linear-gradient(135deg, var(--jh-primary-light), var(--jh-deep));
  border: 1px solid rgba(97, 12, 58, 0.28);
  border-radius: 12px;
  box-shadow: 0 7px 17px rgba(53, 18, 47, 0.16);
  text-decoration: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.jh-access-card:hover,
.jh-access-card:focus {
  color: #fff !important;
  box-shadow: 0 11px 22px rgba(53, 18, 47, 0.24);
  text-decoration: none !important;
  transform: translateY(-3px);
}

.jh-access-icon {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--jh-primary);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.jh-access-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jh-access-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.jh-access-title {
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.055em;
  line-height: 1.2;
  font-family: "Perpetua";
  font-variant: unicase;
  font-style: italic;
}

.jh-access-subtitle {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.3;
  font-family: "Perpetua";
}

.jh-editor-note {
  position: relative;
  display: flex;
  min-height: 82px;
  margin: 0;
  padding: 14px 20px 12px 48px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at bottom right, rgba(227, 17, 255, 0.055), transparent 38%), linear-gradient(135deg, #fff, var(--jh-soft));
  border: 1px solid var(--jh-line);
  border-left: 4px solid var(--jh-primary);
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(53, 18, 47, 0.07);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.jh-editor-note:hover {
  border-color: rgba(97, 12, 58, 0.32);
  border-left-color: var(--jh-accent);
  box-shadow: 0 9px 19px rgba(53, 18, 47, 0.12);
  transform: translateY(-2px);
}

.jh-editor-note::before {
  content: "\201C";
  position: absolute;
  top: -2px;
  left: 13px;
  color: rgba(97, 12, 58, 0.17);
  font-family: Georgia, serif;
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
}

.jh-editor-note p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #443944;
  font-family: "Perpetua", Georgia, serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.42;
  text-align: left;
}

.jh-editor-note footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--jh-primary);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: capitalize;
}

.jh-editor-note footer::before {
  content: "";
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--jh-accent), var(--jh-primary));
  border-radius: 999px;
}

/* Announcements */
.jh-announcement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.jh-announcement-card {
  position: relative;
  display: flex;
  min-height: 92px;
  padding: 13px 48px 12px 14px;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(227, 17, 255, 0.045), transparent 42%), #fff;
  border: 1px solid var(--jh-line);
  border-left: 3px solid var(--jh-primary);
  border-radius: 10px;
  box-shadow: 0 4px 11px rgba(53, 18, 47, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.jh-announcement-card:hover {
  border-color: rgba(97, 12, 58, 0.34);
  border-left-color: var(--jh-accent);
  box-shadow: 0 8px 17px rgba(53, 18, 47, 0.12);
  transform: translateY(-3px);
}

.jh-announcement-title {
  margin: 0 0 8px;
  font-family: "Perpetua", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.jh-announcement-title a {
  color: var(--jh-text) !important;
  text-decoration: none !important;
}

.jh-announcement-title a:hover,
.jh-announcement-title a:focus {
  color: var(--jh-primary) !important;
}

.jh-new-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 5px;
  color: #fff;
  background: linear-gradient(135deg, var(--jh-accent), var(--jh-primary));
  border-radius: 999px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.2;
  vertical-align: 2px;
}

.jh-announcement-date {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0;
  color: var(--jh-muted);
  font-size: 9.5px;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-transform: uppercase;
}

.jh-announcement-date::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  background: var(--jh-gold);
  border-radius: 50%;
}

.jh-announcement-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: #fff !important;
  background: var(--jh-primary);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(53, 18, 47, 0.18);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  transform: translateY(-50%);
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.jh-announcement-arrow:hover,
.jh-announcement-arrow:focus {
  color: #fff !important;
  background: var(--jh-primary-light);
  transform: translateY(-50%) translateX(2px);
}

/* SDGs: compact two-row grid on desktop */
.jh-sdg-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0 4px;
}

.jh-sdg-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(97, 12, 58, 0.12);
  border-radius: 12px;
  box-shadow: 0 3px 9px rgba(53, 18, 47, 0.07);
  outline-offset: 3px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.jh-sdg-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(78%) saturate(0.72);
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.jh-sdg-item:hover,
.jh-sdg-item:focus {
  z-index: 2;
  border-color: rgba(227, 17, 255, 0.48);
  box-shadow: 0 8px 17px rgba(53, 18, 47, 0.16);
  transform: translateY(-3px);
}

.jh-sdg-item:hover img,
.jh-sdg-item:focus img {
  filter: grayscale(0) saturate(1);
  transform: scale(1.035);
}

/* Responsive */
@media (max-width: 900px) {
  .jh-access-row {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .jh-sdg-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .jh-panel-section {
    width: min(100% - 18px, 620px);
    margin: 16px auto;
  }

  .jh-access-row,
  .jh-announcement-grid {
    grid-template-columns: 1fr;
  }

  .jh-access-card {
    min-height: 68px;
    padding: 11px 14px;
  }

  .jh-editor-note {
    min-height: 76px;
    padding: 13px 15px 12px 45px;
  }

  .jh-announcement-card {
    min-height: 76px;
  }

  .jh-sdg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
}

@media (max-width: 420px) {
  .jh-section-title {
    font-size: 17px;
  }

  .jh-section-link {
    padding: 6px 9px;
    font-size: 9px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .jh-access-card,
  .jh-editor-note,
  .jh-section-link,
  .jh-announcement-card,
  .jh-announcement-arrow,
  .jh-sdg-item,
  .jh-sdg-item img {
    transition: none;
  }
}

/* ============================================================
   COMPACT ANNOUNCEMENT NEWS SLIDER
   ============================================================ */

.jh-news {
  position: relative;
  width: 100%;
  margin-top: clamp(24px, 3vw, 30px);
  font-family: Perpetua, Georgia, serif;
}

/* Header */

.jh-news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #eadde4;
}

.jh-news-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.jh-news-heading-mark {
  flex: 0 0 4px;
  width: 4px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e311ff 0%, #76003f 100%);
}

.jh-news-kicker {
  display: block;
  margin: 0 0 1px;
  color: #8a6075;
  font-family: Perpetua, Georgia, serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.jh-news-header h2 {
  margin: 0;
  color: #351b29;
  font-family: Perpetua, Georgia, serif;
  font-size: clamp(19px, 2vw, 23px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
}

.jh-news-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 13px;
  color: #76003f !important;
  font-family: Perpetua, Georgia, serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none !important;
  background: #ffffff;
  border: 1px solid #dcbfce;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.jh-news-view-all:hover,
.jh-news-view-all:focus-visible {
  color: #ffffff !important;
  background: #76003f;
  border-color: #76003f;
  transform: translateY(-1px);
}

/* Slider */

.jh-news-slider {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.jh-news-viewport {
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(100deg, #ffffff 0%, #fff8fc 100%);
  border: 1px solid #e7d5df;
  border-left: 4px solid #76003f;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(71, 20, 48, 0.07);
}

.jh-news-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.jh-news-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta action"
    "title action";
  align-items: center;
  column-gap: 24px;
  row-gap: 6px;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 104px;
  padding: 18px 22px;
  box-sizing: border-box;
}

.jh-news-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 13px;
  min-width: 0;
}

.jh-news-label {
  color: #76003f;
  font-family: Perpetua, Georgia, serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
  font-variant: unicase;
  font-style: italic;
}

.jh-news-label::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 12px;
  vertical-align: middle;
  background: #e2ae2f;
  border-radius: 50%;
}

.jh-news-date {
  color: #75666e;
  font-family: Perpetua, Georgia, serif;
  font-size: 18px;
  line-height: 1.2;
}

.jh-news-title {
  grid-area: title;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-family: Perpetua, Georgia, serif;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  line-height: 1.25;
}

.jh-news-title a {
  color: #35232c !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.jh-news-title a:hover,
.jh-news-title a:focus-visible {
  color: #920052 !important;
}

/* Badge NEW dipertahankan */

.jh-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px 2px;
  color: #ffffff;
  font-family: Perpetua, Georgia, serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #e311ff 0%, #8b0050 100%);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(139, 0, 80, 0.18);
}

/* Read button */

.jh-news-read {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 104px;
  padding: 9px 13px;
  color: #ffffff !important;
  font-family: Perpetua, Georgia, serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none !important;
  background: #76003f;
  border: 1px solid #76003f;
  border-radius: 999px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.jh-news-read:hover,
.jh-news-read:focus-visible {
  color: #ffffff !important;
  background: #980057;
  border-color: #980057;
  transform: translateX(2px);
}

/* Controls */

.jh-news-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.jh-news-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #76003f;
  background: #ffffff;
  border: 1px solid #dcbfce;
  border-radius: 50%;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.jh-news-control:hover,
.jh-news-control:focus-visible {
  color: #ffffff;
  background: #76003f;
  border-color: #76003f;
  transform: translateY(-1px);
}

.jh-news-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.jh-news-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: #dec9d4;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

.jh-news-dot.is-active {
  width: 19px;
  background: #76003f;
}

/* Tablet */

@media (max-width: 760px) {
  .jh-news-slider {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .jh-news-controls {
    justify-content: center;
  }

  .jh-news-slide {
    min-height: 112px;
    padding: 17px 18px;
  }
}

/* Mobile */

@media (max-width: 540px) {
  .jh-news-header {
    align-items: center;
  }

  .jh-news-kicker {
    display: none;
  }

  .jh-news-view-all {
    padding: 7px 11px;
    font-size: 13px;
  }

  .jh-news-slide {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "meta meta"
      "title action";
    column-gap: 12px;
    min-height: 116px;
    padding: 15px 16px;
  }

  .jh-news-date {
    font-size: 13px;
  }

  .jh-news-title {
    font-size: 17px;
  }

  .jh-news-read {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
  }

  .jh-news-read span {
    font-size: 17px;
  }
}

/* Menghormati pengaturan pengurangan animasi pengguna */

@media (prefers-reduced-motion: reduce) {
  .jh-news-track,
  .jh-news-view-all,
  .jh-news-read,
  .jh-news-control,
  .jh-news-dot {
    transition: none !important;
  }
}

/* ============================================================
   SDG AUTO-RUNNING CAROUSEL
   ============================================================ */

.jh-sdg-showcase {
  width: 100%;
  margin-top: clamp(24px, 3vw, 30px);
  font-family: Perpetua, Georgia, serif;
}

/* Header */

.jh-sdg-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #eadde4;
}

.jh-sdg-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.jh-sdg-heading-mark {
  flex: 0 0 4px;
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e311ff 0%, #76003f 100%);
}

.jh-sdg-kicker {
  display: block;
  margin-bottom: 2px;
  color: #8a6075;
  font-family: Perpetua, Georgia, serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.jh-sdg-header h2 {
  margin: 0;
  color: #351b29;
  font-family: Perpetua, Georgia, serif;
  font-size: clamp(19px, 2vw, 23px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
}

.jh-sdg-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 13px;
  color: #76003f !important;
  font-family: Perpetua, Georgia, serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none !important;
  background: #ffffff;
  border: 1px solid #dcbfce;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.jh-sdg-explore:hover,
.jh-sdg-explore:focus-visible {
  color: #ffffff !important;
  background: #76003f;
  border-color: #76003f;
  transform: translateY(-1px);
}

/* Running area */

.jh-sdg-marquee {
  position: relative;
  width: 100%;
  padding: 16px 0;
  overflow: hidden;
  background: linear-gradient(110deg, #ffffff 0%, #fff8fc 50%, #ffffff 100%);
  border: 1px solid #ead9e2;
  border-radius: 14px;
  box-shadow: 0 7px 22px rgba(71, 20, 48, 0.07);
}

.jh-sdg-track {
  display: flex;
  width: max-content;
  animation: jh-sdg-running 75s linear infinite;
  will-change: transform;
}

.jh-sdg-group {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  padding-right: 13px;
}

/* Pause saat digunakan */

.jh-sdg-marquee:hover .jh-sdg-track,
.jh-sdg-marquee:focus-within .jh-sdg-track {
  animation-play-state: paused;
}

/* Individual cards */

.jh-sdg-card {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  width: 222px;
  min-height: 94px;
  padding: 9px 14px 9px 9px;
  box-sizing: border-box;
  color: #38242e !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #eadde4;
  border-radius: 999px 16px 16px 999px;
  box-shadow: 0 4px 12px rgba(63, 25, 45, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.jh-sdg-card:hover,
.jh-sdg-card:focus-visible {
  color: #38242e !important;
  border-color: #cda3b8;
  box-shadow: 0 8px 20px rgba(90, 22, 58, 0.13);
  transform: translateY(-3px);
  outline: none;
}

/* Circular SDG icons */

.jh-sdg-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  overflow: hidden;
  background: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(91, 39, 66, 0.12),
    0 5px 13px rgba(58, 24, 42, 0.13);
}

.jh-sdg-icon img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(1.04);
  transition: transform 0.3s ease;
}

.jh-sdg-card:hover .jh-sdg-icon img,
.jh-sdg-card:focus-visible .jh-sdg-icon img {
  transform: scale(1.11);
}

/* SDG text */

.jh-sdg-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.15;
}

.jh-sdg-copy strong {
  display: block;
  margin-bottom: 4px;
  color: #76003f;
  font-family: Perpetua, Georgia, serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.jh-sdg-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #4c3c44;
  font-family: Perpetua, Georgia, serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.17;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-variant: unicase;
  faont-style: italic;
}

/* All Goals card */

.jh-sdg-wheel {
  background: linear-gradient(120deg, #fffaff 0%, #ffffff 100%);
  border-color: #d9b7c9;
}

.jh-sdg-wheel .jh-sdg-icon img {
  object-fit: contain;
  transform: scale(0.9);
}

.jh-sdg-wheel:hover .jh-sdg-icon img,
.jh-sdg-wheel:focus-visible .jh-sdg-icon img {
  transform: scale(0.97) rotate(8deg);
}

/* Soft edge fade */

.jh-sdg-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 54px;
  pointer-events: none;
}

.jh-sdg-fade-left {
  left: 0;
  background: linear-gradient(90deg, #ffffff 8%, rgba(255, 255, 255, 0) 100%);
}

.jh-sdg-fade-right {
  right: 0;
  background: linear-gradient(270deg, #ffffff 8%, rgba(255, 255, 255, 0) 100%);
}

/* Continuous movement */

@keyframes jh-sdg-running {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Tablet */

@media (max-width: 760px) {
  .jh-sdg-card {
    width: 208px;
    min-height: 86px;
  }

  .jh-sdg-icon {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
  }

  .jh-sdg-copy small {
    font-size: 13px;
  }
}

/* Mobile */

@media (max-width: 540px) {
  .jh-sdg-header {
    align-items: center;
    gap: 10px;
  }

  .jh-sdg-kicker {
    display: none;
  }

  .jh-sdg-header h2 {
    font-size: 18px;
  }

  .jh-sdg-explore {
    padding: 7px 10px;
    font-size: 13px;
  }

  .jh-sdg-marquee {
    padding: 13px 0;
    border-radius: 11px;
  }

  .jh-sdg-card {
    width: 194px;
    min-height: 78px;
    padding: 7px 11px 7px 7px;
  }

  .jh-sdg-icon {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
  }

  .jh-sdg-copy strong {
    margin-bottom: 3px;
    font-size: 13px;
  }

  .jh-sdg-copy small {
    font-size: 12.5px;
  }

  .jh-sdg-fade {
    width: 28px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .jh-sdg-track {
    animation: none !important;
  }

  .jh-sdg-marquee {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .jh-sdg-card,
  .jh-sdg-icon img {
    transition: none !important;
  }
}
.jh-access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #76003f;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  box-shadow:
    0 4px 11px rgba(43, 0, 24, 0.2),
    0 0 0 4px rgba(255, 255, 255, 0.09);
}

/* ============================================================
   COMPACT OPEN ACCESS AND SUBMISSION BUTTONS
   ============================================================ */

.jh-action-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  height: 100%;
}

.jh-action-stack .jh-access-card {
  min-height: 0;
  height: 100%;
  padding: 10px 15px 10px 10px;
  border-radius: 999px;
}

.jh-action-stack .jh-access-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.jh-action-stack .jh-access-icon svg {
  width: 21px;
  height: 21px;
}

.jh-action-stack .jh-access-title {
  font-size: 17px;
  line-height: 1;
}

.jh-action-stack .jh-access-subtitle {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.1;
}

/* Submission variation */

.jh-submit-card {
  background: linear-gradient(135deg, #403047 0%, #5d3d50 100%);
}

.jh-submit-card:hover,
.jh-submit-card:focus-visible {
  background: linear-gradient(135deg, #51364a 0%, #76003f 100%);
}

.jh-submit-icon {
  color: #6c003b;
  background: #f5d879;
}

.jh-card-arrow {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.8);
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.jh-access-card:hover .jh-card-arrow,
.jh-access-card:focus-visible .jh-card-arrow {
  transform: translateX(3px);
}

/* Keep both columns equal in total height */

.jh-access-row {
  align-items: stretch;
}

@media (max-width: 760px) {
  .jh-action-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .jh-action-stack .jh-access-card {
    min-height: 70px;
  }
}

@media (max-width: 480px) {
  .jh-action-stack {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .jh-action-stack .jh-access-card {
    min-height: 66px;
  }

  .jh-action-stack .jh-access-title {
    font-size: 16px;
  }
}
/* ============================================================
   JOURNAL SUBJECT AREAS
   ============================================================ */

.jh-subject-section {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  font-family: Perpetua, Georgia, serif;
  background: linear-gradient(135deg, #ffffff 0%, #fffafd 100%);
  border: 1px solid #eadce4;
  border-radius: 14px;
  box-shadow: 0 7px 20px rgba(73, 23, 50, 0.06);
  box-sizing: border-box;
}

.jh-subject-section *,
.jh-subject-section *::before,
.jh-subject-section *::after {
  box-sizing: border-box;
}

/* Header */

.jh-subject-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 15px;
}

.jh-subject-eyebrow {
  color: var(--jh-burgundy);
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.35;
  font-variant: unicase;
  font-style: italic;
}

.jh-subject-header h2 {
  margin: 2px 0 0;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.08;
  font-variant: unicase;
  font-style: italic;
}

.jh-subject-header p {
  max-width: 490px;
  margin: 0;
  color: #76636d;
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

/* Subject cards */

.jh-subject-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.jh-subject-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 82px;
  padding: 13px 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #eadde4;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(67, 24, 46, 0.05);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.jh-subject-card::after {
  position: absolute;
  right: -29px;
  bottom: -43px;
  width: 90px;
  height: 90px;
  content: "";
  border: 14px solid rgba(118, 0, 63, 0.035);
  border-radius: 50%;
}

.jh-subject-card:hover {
  border-color: #d9b9ca;
  box-shadow: 0 8px 18px rgba(74, 21, 48, 0.1);
  transform: translateY(-2px);
}

/* Icons */

.jh-subject-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 5px 11px rgba(67, 17, 43, 0.16);
}

.jh-subject-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jh-subject-social .jh-subject-icon {
  background: linear-gradient(135deg, #76003f, #a4005d);
}

.jh-subject-engineering .jh-subject-icon {
  background: linear-gradient(135deg, #9b6b0c, #d3a12f);
}

.jh-subject-computing .jh-subject-icon {
  background: linear-gradient(135deg, #343e8f, #5668c8);
}

/* Typography */

.jh-subject-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jh-subject-number {
  position: absolute;
  top: -13px;
  right: -3px;
  color: rgba(118, 0, 63, 0.08);
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
}

.jh-subject-content strong {
  padding-right: 25px;
  color: #4f2c3e;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
}

.jh-subject-content > span:last-child {
  margin-top: 4px;
  color: #7b6872;
  font-family: NexusSansTF-Regular, Arial, sans-serif;
  font-size: 11.5px;
  line-height: 1.2;
}

/* Responsive */

@media (max-width: 820px) {
  .jh-subject-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .jh-subject-header p {
    max-width: 650px;
    text-align: left;
  }

  .jh-subject-grid {
    grid-template-columns: 1fr;
  }

  .jh-subject-card {
    min-height: 74px;
  }
}

@media (max-width: 480px) {
  .jh-subject-section {
    padding: 16px;
    border-radius: 12px;
  }

  .jh-subject-header h2 {
    font-size: 23px;
  }

  .jh-subject-header p {
    font-size: 12.5px;
  }

  .jh-subject-card {
    min-height: 70px;
    padding: 11px 12px;
  }

  .jh-subject-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .jh-subject-icon svg {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jh-subject-card {
    transition: none !important;
  }
}

/* ============================================================
   J-HyTEL — COMPACT JOURNAL INFORMATION
   ============================================================ */

.jh-profile,
.jh-modal {
  --jh-wine: #71003d;
  --jh-wine-dark: #4f002b;
  --jh-gold: #b98927;
  --jh-text: #422f39;
  --jh-muted: #806d77;
  --jh-line: #eadde4;
  --jh-soft: #fff9fc;
  font-family: Perpetua, "Times New Roman", Georgia, serif;
  box-sizing: border-box;
}

.jh-profile *,
.jh-profile *::before,
.jh-profile *::after,
.jh-modal *,
.jh-modal *::before,
.jh-modal *::after {
  box-sizing: border-box;
  font-family: inherit;
}

.jh-profile {
  width: 100%;
  margin: 20px 0;
  padding: 17px;
  background: #ffffff;
  border: 1px solid var(--jh-line);
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(74, 24, 50, 0.07);
}

/* Heading */

.jh-profile-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.jh-profile-eyebrow {
  color: var(--jh-burgundy);
  font-family: "Perpetua", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.35;
  font-variant: unicase;
  font-style: italic;
}

.jh-profile-heading h2,
.jh-modal-header h2 {
  margin: 2px 0 0;
  color: var(--jh-ink);
  font-family: "Perpetua", Georgia, serif;
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.08;
  font-variant: unicase;
  font-style: italic;
}

.jh-profile-mark {
  padding: 6px 13px;
  color: #ffffff;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.05em;
  background: var(--jh-wine);
  border-radius: 999px;
  font-variant: unicase;
}

/* Compact horizontal strip */

.jh-profile-strip {
  display: grid;
  grid-template-columns:
    minmax(270px, 1.5fr)
    minmax(155px, 0.75fr)
    minmax(205px, 0.95fr)
    minmax(145px, 0.7fr);
  align-items: stretch;
  overflow: hidden;
  background: var(--jh-soft);
  border: 1px solid var(--jh-line);
  border-radius: 12px;
}

.jh-profile-primary,
.jh-profile-fact,
.jh-profile-action {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 82px;
  padding: 13px 15px;
}

.jh-profile-primary,
.jh-profile-fact {
  border-right: 1px solid var(--jh-line);
}

/* Main journal identity */

.jh-profile-primary {
  gap: 12px;
  background: linear-gradient(135deg, #ffffff, #fff8fc);
}

.jh-profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--jh-wine), #9a0056);
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(113, 0, 61, 0.18);
}

.jh-profile-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jh-profile-primary strong {
  display: block;
  color: #4c293b;
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.08;
}

.jh-profile-primary small {
  display: block;
  margin-top: 4px;
  color: var(--jh-muted);
  font-size: 15px;
  line-height: 1.15;
}

/* Facts */

.jh-profile-fact {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.jh-profile-fact > span,
.jh-detail-item > span {
  display: block;
  margin-bottom: 5px;
  color: var(--jh-text);
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
}

.jh-profile-fact > strong {
  color: var(--jh-text);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
}

.jh-profile-fact > small {
  margin-top: 3px;
  color: var(--jh-muted);
  font-size: 15px;
  line-height: 1.15;
}

.jh-profile-identifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
}

.jh-profile-identifiers a {
  color: inherit;
  text-decoration: none;
}

.jh-profile-identifiers a:hover strong {
  color: var(--jh-wine);
}

.jh-profile-identifiers small {
  display: block;
  color: var(--jh-muted);
  font-size: 15px;
  line-height: 1;
}

.jh-profile-identifiers strong {
  display: block;
  margin-top: 2px;
  color: var(--jh-text);
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
}

/* View profile button */

.jh-profile-action {
  justify-content: center;
  padding: 12px;
  background: #ffffff;
}

.jh-profile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  color: #ffffff !important;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--jh-wine-dark), var(--jh-wine));
  border-radius: 999px;
  box-shadow: 0 5px 13px rgba(91, 0, 49, 0.16);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.jh-profile-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.jh-profile-button:hover,
.jh-profile-button:focus-visible {
  color: #ffffff !important;
  box-shadow: 0 8px 17px rgba(91, 0, 49, 0.23);
  transform: translateY(-1px);
  outline: none;
}

.jh-profile-button:hover svg {
  transform: translateX(2px);
}

/* ============================================================
   CSS-ONLY POP-UP
   ============================================================ */

.jh-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.jh-modal:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.jh-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 17, 27, 0.64);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.jh-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1050px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 17px;
  box-shadow: 0 24px 65px rgba(35, 5, 22, 0.3);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.22s ease;
  scrollbar-width: thin;
  scrollbar-color: #c9a8b9 transparent;
}

.jh-modal:target .jh-modal-panel {
  transform: translateY(0) scale(1);
}

/* Modal header */

.jh-modal-header {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 15px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--jh-line);
  backdrop-filter: blur(8px);
}

.jh-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: var(--jh-wine) !important;
  font-family: Georgia, serif;
  font-size: 27px;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  text-decoration: none !important;
  background: var(--jh-soft);
  border: 1px solid var(--jh-line);
  border-radius: 50%;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.jh-modal-close:hover,
.jh-modal-close:focus-visible {
  color: #ffffff !important;
  background: var(--jh-wine);
  border-color: var(--jh-wine);
  transform: rotate(5deg);
  outline: none;
}

/* Modal grid */

.jh-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 20px 20px;
}

.jh-detail-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 67px;
  padding: 11px 12px;
  background: var(--jh-soft);
  border: 1px solid var(--jh-line);
  border-radius: 10px;
}

.jh-detail-wide,
.jh-detail-person {
  grid-column: span 2;
}

.jh-detail-collaboration {
  grid-column: span 3;
}

.jh-detail-item strong {
  display: block;
  color: var(--jh-text);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
}

.jh-detail-item small {
  display: block;
  margin-top: 3px;
  color: var(--jh-muted);
  font-size: 15px;
  line-height: 1.2;
}

/* Editorial team */

.jh-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.jh-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  font-size: 17px;
  background: #ffffff;
  border: 1px solid #e6d6de;
  border-radius: 50%;
}

.jh-coeditors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Links and collaborations */

.jh-inline-links,
.jh-collaboration-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jh-inline-links a,
.jh-collaboration-list > a,
.jh-collaboration-list > span {
  color: var(--jh-text) !important;
  text-decoration: none !important;
}

.jh-inline-links a {
  padding: 5px 8px;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #e3d2db;
  border-radius: 999px;
}

.jh-collaboration-list > a,
.jh-collaboration-list > span {
  padding: 6px 9px;
  background: #ffffff;
  border: 1px solid #e3d2db;
  border-radius: 8px;
}

.jh-collaboration-list strong {
  font-size: 12px;
}

.jh-collaboration-list small {
  font-size: 15px;
}

.jh-inline-links a:hover,
.jh-collaboration-list > a:hover {
  color: var(--jh-wine) !important;
  border-color: #d3aabd;
}

/* OAI */

.jh-oai-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit !important;
  text-decoration: none !important;
}

.jh-oai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  color: #ffffff;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  background: var(--jh-wine);
  border-radius: 9px;
}

/* Footer */

.jh-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  color: var(--jh-muted);
  background: #fffafd;
  border-top: 1px solid var(--jh-line);
}

.jh-modal-footer a {
  padding: 6px 12px;
  color: var(--jh-wine) !important;
  font-weight: 300;
  text-decoration: none !important;
  border: 1px solid #dcbfce;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 920px) {
  .jh-profile-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jh-profile-primary,
  .jh-profile-fact {
    border-right: 0;
    border-bottom: 1px solid var(--jh-line);
  }

  .jh-profile-primary,
  .jh-profile-fact:nth-child(3) {
    border-right: 1px solid var(--jh-line);
  }

  .jh-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jh-detail-collaboration {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .jh-profile {
    padding: 14px;
  }

  .jh-profile-strip {
    grid-template-columns: 1fr;
  }

  .jh-profile-primary,
  .jh-profile-fact,
  .jh-profile-action {
    min-height: 70px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--jh-line);
  }

  .jh-profile-action {
    border-bottom: 0;
  }

  .jh-profile-primary strong {
    font-size: 15px;
  }

  .jh-modal {
    align-items: flex-end;
    padding: 8px;
  }

  .jh-modal-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 10px 10px;
  }

  .jh-modal-header {
    padding: 15px;
  }

  .jh-modal-grid {
    grid-template-columns: 1fr;
    padding: 12px 15px 16px;
  }

  .jh-detail-wide,
  .jh-detail-person,
  .jh-detail-collaboration {
    grid-column: span 1;
  }

  .jh-coeditors {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .jh-modal-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jh-profile-button,
  .jh-profile-button svg,
  .jh-modal,
  .jh-modal-panel,
  .jh-modal-close {
    transition: none !important;
  }
}

.jh-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jh-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e4d3dc;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(73, 20, 48, 0.1);
}

.jh-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jh-person-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jh-person-info strong {
  display: block;
  color: #422f39;
  font-family: Perpetua, Georgia, serif;
  font-size: 14.5px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
}

.jh-person-info small {
  display: block;
  margin-top: 3px;
  color: #806d77;
  font-family: Perpetua, Georgia, serif;
  font-size: 12px;
  line-height: 1.2;
}

/* Compact Scopus link */

.jh-scopus-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 8px 3px 4px;
  color: #704224 !important;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none !important;
  background: #fffaf6;
  border: 1px solid #edcdb7;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.jh-scopus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  background: #e9711c;
  border-radius: 50%;
}

.jh-scopus-link:hover,
.jh-scopus-link:focus-visible {
  color: #71003d !important;
  background: #ffffff;
  border-color: #e9711c;
  outline: none;
}

.jh-journal-description {
  text-align: left;
  word-spacing: normal;
  letter-spacing: normal;
}