/* =========================================================
           AIETR BRAND THEME
           Based on the orange/gold and dark blue appearance
           of the official AIETR logo.
        ========================================================== */

:root {
  --aietr-orange: #f6a500;
  --aietr-orange-dark: #d88a00;
  --aietr-orange-soft: #fff7e4;
  --aietr-orange-border: #f3d38a;
  --aietr-blue: #183a5b;
  --aietr-blue-dark: #102c45;
  --aietr-blue-soft: #edf4f9;
  --aietr-blue-border: #c8d8e5;
  --text: #1f2933;
  --text-soft: #5d6670;
  --muted: #88837b;
  --page: #ffffff;
  --surface: #fbf9f5;
  --surface-2: #f5f3ef;
  --surface-3: #efece6;
  --border: #e6e1d9;
  --border-dark: #d9d3c9;
  --success: #14735c;
  --success-soft: #effaf6;
  --success-border: #a4ddce;
  --purple: #5c2aa8;
  --purple-soft: #f5f1fc;
  --purple-border: #ddd2f4;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  --max-width: 95%;
}

/* =========================================================
           RESET
        ========================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  background: var(--page);

  color: var(--text);

  font-family: "DM Sans", Arial, Helvetica, sans-serif;

  line-height: 1.65;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* =========================================================
           CONTAINER
        ========================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);

  margin: 0 auto;

  padding-left: 20px;
  padding-right: 20px;
}

/* =========================================================
           TOP HEADER
        ========================================================== */

.site-header {
  position: sticky;
  top: 0;

  z-index: 9999;

  background: rgba(255, 255, 255, 0.97);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border);
}

.header-inner {
  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

/* =========================================================
           AIETR TOP LOGO
        ========================================================== */

.brand-link {
  display: flex;

  align-items: center;

  text-decoration: none;

  min-width: 0;
}

.aietr-logo {
  display: block;

  width: 285px;

  max-width: 100%;

  height: auto;

  object-fit: contain;

  object-position: left center;
}

/* =========================================================
           HEADER RIGHT SIDE
        ========================================================== */

.header-right {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 15px;

  min-width: 0;
}

/* =========================================================
           CROSSREF DOI HEADER BRAND
        ========================================================== */

.crossref-header-brand {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 6px 10px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;

  text-decoration: none;

  transition: border-color 0.2s ease, background 0.2s ease;
}

.crossref-header-brand:hover {
  background: var(--aietr-orange-soft);

  border-color: var(--aietr-orange-border);
}

.crossref-logo-mark {
  width: 31px;
  height: 31px;

  position: relative;

  flex: 0 0 31px;
}

.crossref-logo-mark span {
  position: absolute;

  display: block;

  transform: skewX(-28deg);

  border-radius: 2px;
}

.crossref-logo-mark .c1 {
  width: 14px;
  height: 7px;

  top: 4px;
  left: 11px;

  background: #f4b400;
}

.crossref-logo-mark .c2 {
  width: 14px;
  height: 7px;

  top: 11px;
  left: 4px;

  background: #e64a35;
}

.crossref-logo-mark .c3 {
  width: 14px;
  height: 7px;

  top: 18px;
  left: 11px;

  background: #525866;
}

.crossref-header-text {
  display: flex;

  flex-direction: column;

  line-height: 1.1;
}

.crossref-header-title {
  color: #333b43;

  font-size: 13px;

  font-weight: 700;
}

.crossref-header-subtitle {
  margin-top: 3px;

  color: var(--aietr-orange-dark);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

/* =========================================================
           DESKTOP NAVIGATION
        ========================================================== */

.desktop-nav {
  display: flex;

  align-items: center;

  gap: 3px;
}

.desktop-nav a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 40px;

  padding: 8px 11px;

  border-radius: 8px;

  text-decoration: none;

  color: #3f4852;

  font-size: 12px;

  font-weight: 600;

  transition: background 0.2s ease, color 0.2s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
  background: var(--aietr-orange-soft);

  color: var(--aietr-blue);
}

.desktop-nav .nav-support {
  background: var(--aietr-orange);

  color: #212121;

  margin-left: 3px;
}

.desktop-nav .nav-support:hover {
  background: var(--aietr-orange-dark);

  color: #fff;
}

/* =========================================================
           MOBILE MENU BUTTON
        ========================================================== */

.mobile-menu-button {
  display: none;

  width: 42px;
  height: 42px;

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

  padding: 0;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #ffffff;

  color: var(--aietr-blue);

  cursor: pointer;
}

.mobile-menu-button:hover {
  background: var(--aietr-orange-soft);

  border-color: var(--aietr-orange-border);
}

/* =========================================================
           MOBILE NAV
        ========================================================== */

.mobile-menu {
  display: none;

  border-top: 1px solid var(--border);

  background: #ffffff;
}

.mobile-menu.show {
  display: block;
}

.mobile-menu a {
  display: block;

  padding: 13px 20px;

  text-decoration: none;

  border-bottom: 1px solid #f0ece6;

  color: #374151;

  font-size: 14px;

  font-weight: 500;
}

.mobile-menu a:hover {
  background: var(--surface);

  color: var(--aietr-blue);
}

/* =========================================================
           MAIN PAGE
        ========================================================== */

.page {
  /* padding-bottom: 45px; */
}

/* =========================================================
           HERO
        ========================================================== */

.hero {
  text-align: center;

  padding: 20px 18px 27px;

  margin-bottom: 12px;
}

.eyebrow {
  margin: 6px 0 6px;

  color: #333;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.12em;

  line-height: 1.3;

  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 8px;

  color: var(--aietr-blue);

  font-family: "DM Serif Display", Georgia, serif;

  font-size: 34px;

  line-height: 1.16;

  font-weight: 400;
}

.hero h1 em {
  color: var(--aietr-orange-dark);

  font-style: italic;
}

.hero-subtitle {
  margin: 0 0 12px;

  color: var(--aietr-orange-dark);

  font-family: "DM Serif Display", Georgia, serif;

  font-size: 20px;

  line-height: 1.3;

  font-weight: 400;
}

.hero-description {
  max-width: 900px;

  margin: 0 auto 19px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.75;
}

/* =========================================================
           BUTTONS
        ========================================================== */

.button-row {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 9px;
}

.button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  min-height: 43px;

  padding: 10px 16px;

  border-radius: 9px;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;

  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button-orange {
  background: var(--aietr-orange);

  border: 1px solid var(--aietr-orange);

  color: #1f2933;
}

.button-orange:hover {
  background: var(--aietr-orange-dark);

  border-color: var(--aietr-orange-dark);

  color: #ffffff;
}

.button-blue {
  background: var(--aietr-blue);

  border: 1px solid var(--aietr-blue);

  color: #ffffff;
}

.button-blue:hover {
  background: var(--aietr-blue-dark);

  border-color: var(--aietr-blue-dark);
}

.button-outline {
  background: transparent;

  border: 1px solid var(--aietr-blue);

  color: var(--aietr-blue);
}

.button-outline:hover {
  background: var(--aietr-blue-soft);
}

/* =========================================================
           SECTION CARD
        ========================================================== */

.section-card {
  overflow: hidden;

  margin-bottom: 14px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 16px;

  box-shadow: var(--shadow);
}

.section-header {
  padding: 20px 20px 16px;
}

.section-header-row {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 13px;

  flex-wrap: wrap;
}

.section-title {
  margin: 0;

  color: var(--aietr-blue);

  font-family: "DM Serif Display", Georgia, serif;

  font-size: 24px;

  line-height: 1.2;

  font-weight: 400;
}

.section-title em {
  color: var(--aietr-orange-dark);

  font-style: italic;
}

.section-title .yellow-highlight {
  color: #feb324 !important;
}

.section-icon {
  width: 33px;

  height: 33px;

  min-width: 33px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 9px;
}

.icon-orange {
  background: var(--aietr-orange-soft);

  border: 1px solid var(--aietr-orange-border);

  color: var(--aietr-orange-dark);
}

.icon-blue {
  background: var(--aietr-blue-soft);

  border: 1px solid var(--aietr-blue-border);

  color: var(--aietr-blue);
}

.icon-green {
  background: var(--success-soft);

  border: 1px solid var(--success-border);

  color: var(--success);
}

.icon-purple {
  background: var(--purple-soft);

  border: 1px solid var(--purple-border);

  color: var(--purple);
}

.section-divider {
  width: 100%;

  height: 1px;

  margin-top: 12px;

  background: var(--border);
}

.section-body {
  padding: 8px 20px 20px;
}

/* =========================================================
           DOI TERM HIGHLIGHTS
        ========================================================== */

.doi-highlight {
  display: inline;

  padding: 2px 6px;

  border-radius: 5px;

  background: linear-gradient(120deg, #fff1c1, #ffe39a);

  color: var(--aietr-blue);

  font-weight: 700;
}

.doi-prefix {
  display: inline-flex;
  align-items: center;
  margin-top: 15px;
  padding: 5px 10px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  border-radius: 7px;
  color: var(--aietr-blue);
  font-size: 14px;
  font-weight: 700;
}

/* =========================================================
           DOI INTRO
        ========================================================== */

.doi-intro-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.9fr);

  gap: 8px;
}

.doi-intro-copy {
  padding: 20px;

  background: var(--surface-2);

  border-radius: 12px;
}

.doi-intro-copy p {
  margin: 0 0 13px;

  color: #374151;

  font-size: 14px;

  line-height: 1.8;
}

.doi-intro-copy p:last-child {
  margin-bottom: 0;
}

.doi-link-card {
  padding: 20px;

  background: #ffffff;

  border: 1px solid var(--border);

  border-radius: 12px;
}

.doi-link-card h3 {
  margin: 0 0 12px;

  color: var(--aietr-blue);

  font-family: "DM Serif Display", Georgia, serif;

  font-size: 20px;

  font-weight: 400;
}

.doi-resource-links {
  display: grid;

  gap: 7px;
}

.doi-resource-link {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 10px 12px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: var(--surface-2);

  color: var(--aietr-blue);

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;
}

.doi-resource-link:hover {
  background: var(--aietr-orange-soft);

  border-color: var(--aietr-orange-border);
}

/* =========================================================
           CROSSREF SPONSORSHIP
        ========================================================== */

.sponsor-heading {
  margin: 0 0 13px;

  color: var(--aietr-blue);

  font-family: "DM Serif Display", Georgia, serif;

  font-size: 21px;

  font-weight: 400;
}

.sponsor-layout {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.88fr)
    minmax(0, 1.12fr);

  gap: 8px;

  align-items: stretch;
}

.sponsor-image-box {
  padding: 15px;
  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
}

.sponsor-image-box a {
  display: block;

  width: 100%;

  text-decoration: none;
}

.sponsor-image-box img {
  display: block;

  width: 100%;

  height: auto;

  border-radius: 8px;
}

.sponsor-copy {
  padding: 20px;

  background: #ffffff;

  border: 1px solid var(--border);

  border-radius: 12px;
}

.sponsor-copy p {
  margin: 0 0 13px;
  color: #374151;
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
}

.sponsor-copy p:last-of-type {
  margin-bottom: 15px;
}

.sponsor-copy a.inline-link {
  color: #c77900;

  text-decoration: none;

  font-weight: 700;
}

.sponsor-copy a.inline-link:hover {
  text-decoration: underline;
}

/* =========================================================
           DOI BENEFIT CARDS
        ========================================================== */

.doi-benefits {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 8px;

  margin-top: 35px;
}

.doi-benefit-card {
  padding: 17px;

  text-align: center;

  background: #341463;

  border-radius: 12px;
}

.doi-benefit-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #fcb422;
  border-radius: 9px;
  font-size: 20px;
  color: #da8a00;
}

.doi-benefit-icon img {
  width: 23px;

  height: 23px;

  object-fit: contain;
}

.doi-benefit-card h3 {
  margin: 0 0 5px;

  color: #fff;

  font-size: 15px;

  font-weight: 700;
}

.doi-benefit-card p {
  margin: 0;

  color: #fff;

  font-size: 12px;

  line-height: 1.65;
}

/* =========================================================
           JOURNAL PORTFOLIO
        ========================================================== */

.journal-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.journal-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.journal-cover {
  background: #ffffff;
  /* border-bottom: 1px solid var(--border); */
  width: 33%;
}
.journal-cover-frame {
  width: 100%;

  height: 485px;

  display: block;

  border: 0;

  background: #ffffff;
}

.journal-cover-caption {
  padding: 8px 12px;

  color: #7a746c;

  background: var(--surface);

  font-size: 10px;

  text-align: center;
}

.journal-info {
  padding: 18px 18px 0;
  width: 66%;
}

.journal-title {
  margin: 0 0 4px;

  color: var(--aietr-blue);

  font-family: "DM Serif Display", Georgia, serif;

  font-size: 21px;

  line-height: 1.27;

  font-weight: 400;
}

.journal-short-name {
  margin: 0 0 12px;

  color: var(--aietr-orange-dark);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.06em;
}

.badges {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 13px;
}

.badge {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 27px;

  padding: 5px 9px;

  border-radius: 7px;

  font-size: 10px;

  font-weight: 700;

  line-height: 1.2;
}

.badge-open {
  background: var(--success-soft);

  border: 1px solid var(--success-border);

  color: var(--success);
}

.badge-orange {
  background: var(--aietr-orange-soft);

  border: 1px solid var(--aietr-orange-border);

  color: var(--aietr-orange-dark);
}

.badge-blue {
  background: var(--aietr-blue-soft);

  border: 1px solid var(--aietr-blue-border);

  color: var(--aietr-blue);
}

.badge-grey {
  background: #f2f0ec;

  border: 1px solid #ddd8d0;

  color: #615d56;
}

.journal-description {
  margin: 0 0 14px;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.7;
}

.journal-details {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px;

  margin-bottom: 14px;
}

.journal-detail {
  padding: 9px 10px;

  border-radius: 8px;

  background: var(--surface-2);
}

.journal-detail-label {
  display: block;
  margin-bottom: 2px;
  color: #9a938a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.journal-detail-value {
  display: block;
  color: var(--aietr-blue);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

.journal-detail-value a {
  color: var(--aietr-orange-dark);

  text-decoration: none;
}

.journal-detail-value a:hover {
  text-decoration: underline;
}

.journal-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}

.journal-actions .button {
  min-height: 37px;

  padding: 8px 12px;

  font-size: 11px;
}

.journal-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.65;
}

.journal-note strong {
  color: var(--aietr-blue);
}

/* =========================================================
           UPCOMING
        ========================================================== */

.upcoming-card {
  padding: 20px;

  background: linear-gradient(135deg, #fff9e9 0%, #ffffff 100%);

  border: 1px solid var(--aietr-orange-border);

  border-radius: 12px;
}

.upcoming-card h3 {
  margin: 0 0 9px;

  color: var(--aietr-blue);

  font-family: "DM Serif Display", Georgia, serif;

  font-size: 21px;

  font-weight: 400;
}

.upcoming-card p {
  margin: 0 0 13px;

  color: #374151;

  font-size: 14px;

  line-height: 1.8;
}

.upcoming-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 7px;
}

.upcoming-item {
  padding: 11px 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-soft);
  font-size: 13px;
}

.upcoming-item strong {
  color: var(--aietr-blue);
}

/* =========================================================
           WORKFLOW
        ========================================================== */

.workflow-flow {
  display: flex;

  align-items: stretch;

  justify-content: center;

  gap: 0;

  overflow-x: auto;

  overflow-y: visible;

  padding-bottom: 4px;

  scrollbar-width: thin;
}

.workflow-step {
  flex: 1 1 0;

  min-width: 165px;

  padding: 17px 14px;

  background: var(--surface-2);

  border: 1px solid var(--border);

  border-radius: 12px;

  text-align: center;

  min-height: 100%;
}

.workflow-number {
  width: 31px;
  height: 31px;
  margin: 0 auto 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--aietr-orange);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.workflow-step h3 {
  margin: 0 0 5px;
  color: var(--aietr-blue);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.workflow-step p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.workflow-arrow {
  flex: 0 0 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--aietr-orange-dark);

  min-height: 100%;
}

.workflow-arrow svg {
  display: block;
}

/* =========================================================
           FEATURE GRID
        ========================================================== */

.feature-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 8px;
}

.feature {
  display: grid;

  grid-template-columns: 34px minmax(0, 1fr);

  column-gap: 10px;

  align-items: center;

  padding: 15px 16px;

  background: var(--surface-2);

  border: 1px solid var(--border);

  border-radius: 12px;
}

.feature-icon {
  width: 34px;

  height: 34px;

  margin: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 34px;

  border: 1px solid var(--aietr-orange-border);

  border-radius: 9px;

  background: var(--aietr-orange-soft);

  color: var(--aietr-orange-dark);
}

.feature h3 {
  margin: 0;
  color: var(--aietr-blue);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.feature p {
  grid-column: 1 / -1;
  margin: 9px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
           METADATA GRID
        ========================================================== */

.metadata-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;
}

.metadata-card {
  padding: 17px;

  background: var(--surface-2);

  border-radius: 12px;
}

.metadata-card h3 {
  margin: 0 0 10px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 15px;
  font-weight: 400;
}

.check-list {
  display: grid;

  gap: 6px;
}

.check-item {
  padding: 9px 11px;

  background: #ffffff;

  border: 1px solid var(--border);

  border-radius: 9px;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.55;
}

.check {
  color: var(--success);

  margin-right: 6px;

  font-weight: 800;
}

/* =========================================================
           RESPONSIBLE PUBLISHING
        ========================================================== */

.standard-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 8px;
}

.standard {
  padding: 16px;

  background: var(--surface-2);

  border-radius: 12px;
}

.standard strong {
  display: block;
  margin-bottom: 5px;
  color: var(--aietr-blue);
  font-size: 15px;
}

.standard p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12;
  line-height: 1.65;
}

/* =========================================================
           RESOURCE GRID
        ========================================================== */

.resource-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 8px;
}

.resource {
  padding: 15px 16px;

  background: var(--surface-2);

  border-radius: 12px;
}

.resource strong {
  display: block;

  margin-bottom: 5px;

  color: var(--aietr-blue);

  font-size: 14px;
}

.resource a {
  color: var(--aietr-orange-dark);

  text-decoration: none;

  font-size: 12px;

  overflow-wrap: anywhere;
}

.resource a:hover {
  text-decoration: underline;
}

/* =========================================================
           CONTACT & SUPPORT
           Same AIETR orange/gold + dark blue theme
        ========================================================== */

.contact-intro {
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
}

.contact-intro h3 {
  margin: 0 0 8px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 400;
}

.contact-intro p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.contact-card {
  height: 100%;
  padding: 19px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--aietr-orange-border);
  box-shadow: 0 6px 18px rgba(16, 44, 69, 0.08);
}

.contact-card-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}

.contact-card-icon svg {
  width: 18px;
  height: 18px;
}

.contact-card h3 {
  margin: 0 0 7px;
  color: var(--aietr-blue);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}

.contact-card p {
  margin: 0 0 9px;
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.65;
}

.contact-card a {
  color: var(--aietr-orange-dark);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-card a:hover {
  text-decoration: underline;
}

.contact-office {
  margin-top: 4px;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.contact-office-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.contact-office-header-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}

.contact-office-header-icon svg {
  width: 15px;
  height: 15px;
}

.contact-office-header h2 {
  margin: 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 400;
}

.office-details {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.office-item {
  display: grid;
  grid-template-columns: 30px 135px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--border);
}

.office-item:last-child {
  border-bottom: 0;
}

.office-item-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}

.office-item-icon svg {
  width: 14px;
  height: 14px;
}

.office-label {
  margin: 0;
  color: var(--aietr-blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.office-value {
  min-width: 0;
  margin: 0;
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.65;
}

.office-value strong {
  color: var(--text);
  font-weight: 700;
}

.office-value a {
  color: var(--aietr-orange-dark);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.office-value a:hover {
  text-decoration: underline;
}

.contact-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.contact-note-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--aietr-blue-soft);
  border: 1px solid var(--aietr-blue-border);
  color: var(--aietr-blue);
}

.contact-note-icon svg {
  width: 14px;
  height: 14px;
}

.contact-note p {
  margin: 0;
  color: var(--text-soft);
  font-size: 10.5px;
  line-height: 1.6;
}

.contact-note strong {
  color: var(--aietr-blue);
}

@media (max-width: 920px) {
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-item {
    grid-template-columns: 30px 120px minmax(0, 1fr);
  }
}

@media (max-width: 650px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-intro h3 {
    font-size: 21px;
  }

  .contact-intro p {
    font-size: 12px;
  }

  .contact-card {
    padding: 18px 15px;
  }

  .contact-office {
    padding: 15px;
  }

  .office-item {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 3px;
    padding: 12px 11px;
    align-items: start;
  }

  .office-item-icon {
    grid-row: span 2;
    margin-top: 1px;
  }

  .office-label {
    font-size: 10.5px;
  }

  .office-value {
    font-size: 10.8px;
  }

  .contact-note {
    align-items: flex-start;
    padding: 10px;
  }

  .contact-note p {
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  .contact-office {
    padding: 13px 10px;
  }

  .office-item {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 9px;
    padding: 11px 9px;
  }

  .office-item-icon {
    width: 28px;
    height: 28px;
  }

  .contact-note-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card {
    transition: none;
  }
}

@media print {
  .contact-card,
  .contact-office,
  .office-details,
  .contact-note {
    box-shadow: none;
  }

  .contact-office {
    background: #fff;
  }
}

/* =========================================================
           FOOTER
        ========================================================== */

.site-footer {
  /* margin-top: 28px; */
  background: var(--aietr-blue-dark);
  color: #d8e0e7;
}

.footer-main {
  padding: 42px 0 30px;
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.45fr
    1fr
    1fr
    1fr;

  gap: 30px;
}

.footer-logo {
  width: 100%;

  max-width: 100%;

  margin-bottom: 12px;

  padding: 7px;

  background: #ffffff;

  border-radius: 7px;
}

.footer-description {
  max-width: 430px;
  margin: 0;
  color: #e5e8eb;
  font-size: 12px;
  line-height: 1.75;
}

.footer-heading {
  margin: 0 0 11px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 6px;
}

.site-footer h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #fcb422;
}

.footer-links {
  display: grid;

  gap: 8px;
}

.footer-links a {
  color: #e5e8eb;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.5;
}

.footer-links a:hover {
  color: var(--aietr-orange);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom-inner {
  min-height: 56px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  flex-wrap: wrap;
}

.footer-bottom p {
  margin: 0;
  color: #e5e8eb;
  font-size: 12px;
}

.footer-accent {
  color: var(--aietr-orange) !important;

  font-weight: 600;
}

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

@media (max-width: 1100px) {
  .desktop-nav a {
    padding-left: 8px;

    padding-right: 8px;
  }

  .feature-grid,
  .standard-grid,
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-step {
    min-width: 145px;
  }
  .workflow-flow {
    justify-content: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1.35fr 1fr 1fr;
  }
}

@media (max-width: 920px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu-button {
    display: flex;
  }

  .header-right {
    gap: 8px;
  }

  .aietr-logo {
    width: 235px;
  }

  .doi-intro-grid,
  .sponsor-layout,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .journal-grid {
    grid-template-columns: 1fr;
  }

  .doi-benefits,
  .metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .container {
    padding-left: 14px;

    padding-right: 14px;
  }

  .header-inner {
    min-height: 70px;

    gap: 7px;
  }

  .aietr-logo {
    width: 185px;
  }

  .crossref-header-brand {
    padding: 5px 7px;

    gap: 5px;
  }

  .crossref-logo-mark {
    width: 25px;

    height: 25px;

    flex-basis: 25px;
  }

  .crossref-logo-mark .c1 {
    width: 11px;

    height: 6px;

    top: 3px;

    left: 9px;
  }

  .crossref-logo-mark .c2 {
    width: 11px;

    height: 6px;

    top: 9px;

    left: 3px;
  }

  .crossref-logo-mark .c3 {
    width: 11px;

    height: 6px;

    top: 15px;

    left: 9px;
  }

  .crossref-header-title {
    font-size: 10px;
  }

  .crossref-header-subtitle {
    font-size: 7px;
  }

  .mobile-menu-button {
    width: 39px;

    height: 39px;

    min-width: 39px;
  }

  .page {
    /* padding-bottom: 35px; */
  }

  .hero {
    padding: 15px 6px 23px;
  }

  .hero h1 {
    font-size: 27px;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .hero-description {
    font-size: 13px;
  }

  .button-row {
    flex-direction: column;
  }

  .hero .button {
    width: 100%;

    max-width: 310px;
  }

  .section-header {
    padding: 17px 15px 14px;
  }

  .section-body {
    padding: 7px 15px 15px;
  }

  .section-title {
    font-size: 21px;
  }

  .doi-benefits,
  .feature-grid,
  .standard-grid,
  .resource-grid,
  .metadata-grid, .sponsor-layout-2 {
    grid-template-columns: 1fr !important;
  }

  .feature {
    grid-template-columns: 34px minmax(0, 1fr);

    column-gap: 9px;

    padding: 14px;

    align-items: center;
  }

  .feature p {
    margin-top: 8px;

    font-size: 12px;
  }

  /* Mobile workflow: stack every step and keep the connector
               between cards so the sequence reads naturally top-to-bottom. */
  .workflow-flow {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    width: 100%;

    overflow: visible;

    padding-bottom: 0;
  }

  .workflow-step {
    flex: 0 0 auto;

    width: 100%;

    min-width: 0;

    min-height: 0;

    padding: 16px 14px;
  }

  .workflow-arrow {
    flex: 0 0 36px;
    width: 100%;
    min-height: 0;
    height: 36px;
    transform: rotate(
90deg);
  }

  .workflow-arrow svg {
    transform: rotate(90deg);

    transform-origin: center;
  }

  .journal-details {
    grid-template-columns: 1fr;
  }

  .journal-cover-frame {
    height: 455px;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .footer-bottom-inner {
    padding: 13px 0;
  }
}

@media (max-width: 450px) {
  .aietr-logo {
    width: 160px;
  }

  .crossref-header-text {
    display: none;
  }

  .crossref-header-brand {
    padding: 5px;
  }

  .journal-cover-frame {
    height: 410px;
  }
}

/* =========================================================
           REFERENCE-STYLE HEADER / MOBILE NAVIGATION OVERRIDES
           ========================================================= */

:root {
  --reference-navy: #102653;
  --reference-navy-2: #0b1f47;
  --reference-border: #d9dee7;
  --reference-bg: #f4f6f9;
  --reference-text: #1d2a3a;
  --reference-muted: #707a87;
}

.reference-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 38, 83, 0.08);
}

.reference-topbar {
  min-height: 28px;
  background: var(--reference-navy);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
}

.reference-topbar-inner {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.reference-topbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.reference-topbar-note {
  opacity: 0.92;
  font-weight: 500;
}

.reference-topbar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-left: auto;
}

.reference-topbar-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.reference-topbar-nav a i {
  font-size: 10.9px;
  opacity: 0.92;
}

.reference-topbar-nav a:hover,
.reference-topbar-nav a:focus-visible {
  color: #ffd75a;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.reference-topbar-nav a:hover i,
.reference-topbar-nav a:focus-visible i {
  color: #ffd75a;
}

.reference-mainbar {
  background: var(--reference-bg);
  border-bottom: 1px solid var(--reference-border);
}

.reference-mainbar-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.reference-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
  color: var(--reference-navy);
}

.reference-brand-logo {
  display: block;
  width: 400px;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.reference-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reference-brand-copy strong {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 400;
  white-space: nowrap;
}

.reference-brand-copy small {
  color: var(--reference-muted);
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reference-main-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.reference-crossref-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--reference-border);
  border-radius: 8px;
  background: #fff;
  color: #343b45;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.reference-crossref-brand:hover {
  background: #fff9ea;
  border-color: #edce78;
}

.reference-crossref-mark {
  position: relative;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
}

.reference-crossref-mark i {
  position: absolute;
  display: block;
  width: 14px;
  height: 7px;
  transform: skewX(-28deg);
  border-radius: 2px;
}

.reference-crossref-mark .r-c1 {
  top: 4px;
  left: 11px;
  background: #f4b400;
}

.reference-crossref-mark .r-c2 {
  top: 11px;
  left: 4px;
  background: #e64a35;
}

.reference-crossref-mark .r-c3 {
  top: 18px;
  left: 11px;
  background: #525866;
}

.reference-crossref-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.reference-crossref-copy strong {
  font-size: 13px;
  font-weight: 800;
}

.reference-crossref-copy small {
  margin-top: 2px;
  color: #c17f00;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reference-header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  gap: 6px;
}

.reference-header-button-light {
  color: var(--reference-navy);
  background: #fff;
  border: 1px solid var(--reference-navy);
}

.reference-header-button-light:hover {
  background: #edf3fb;
}

.reference-header-button-primary {
  color: #fff;
  background: var(--reference-navy);
  border: 1px solid var(--reference-navy);
}

.reference-header-button-primary:hover {
  background: var(--reference-navy-2);
}

.reference-nav-wrap {
  background: #fff;
  border-bottom: 1px solid var(--reference-border);
}

.reference-nav-inner {
  min-height: 45px;
  display: flex;
  align-items: center;
}

.reference-desktop-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.reference-desktop-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: 8px 8px;
  border-radius: 7px;
  color: #263449;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.reference-desktop-nav a:hover,
.reference-desktop-nav a.reference-nav-active {
  background: #eef3fa;
  color: var(--reference-navy);
}

.reference-mobile-button {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--reference-border);
  border-radius: 8px;
  background: #fff;
  color: var(--reference-navy);
  cursor: pointer;
  flex: 0 0 42px;
  z-index: 10002;
}

.reference-mobile-button-icon {
  width: 20px;
  height: 18px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.reference-mobile-button-icon span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* Screenshot-style left mobile navigation drawer */
.reference-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: min(82vw, 266px);
  height: calc(100vh - 90px);
  max-height: calc(100vh - 90px);
  z-index: 10001;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #eef2f6;
  border-top: 1px solid #d9dee7;
  border-right: 1px solid #d0d7e0;
  box-shadow: 8px 0 22px rgba(16, 38, 83, 0.15);
}

.reference-mobile-menu::after {
  content: "";
  position: fixed;
  top: 0;
  left: min(82vw, 266px);
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(16, 38, 83, 0.025);
}

.reference-mobile-search {
  padding: 7px 7px 8px;
  background: #eef2f6;
  border-bottom: 1px solid #d9dee7;
}

.reference-mobile-search-wrap {
  position: relative;
  width: 100%;
}

.reference-mobile-search input {
  width: 100%;
  height: 36px;
  padding: 7px 10px 7px 34px;
  border: 1px solid #ced5de;
  border-radius: 3px;
  outline: none;
  background: #fff;
  color: #27364a;
  font: 500 13px/1.3 "DM Sans", Arial, sans-serif;
  box-shadow: inset 0 1px 2px rgba(16, 38, 83, 0.04);
}

.reference-mobile-search input::placeholder {
  color: #9aa3ae;
}

.reference-mobile-search input:focus {
  border-color: #9faabd;
  box-shadow: 0 0 0 2px rgba(16, 38, 83, 0.08);
}

.reference-mobile-search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: #55616f;
  pointer-events: none;
}

.reference-mobile-menu nav {
  display: grid;
  gap: 0;
}

.reference-mobile-menu a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 54px;
  padding: 9px 13px 9px 14px;
  /* border-bottom: 1px solid #D8DEE6; */
  color: #384452;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  background: transparent;
}

.reference-mobile-menu a:hover,
.reference-mobile-menu a:focus-visible {
  background: #e4eaf0;
  color: var(--reference-navy);
  outline: none;
}

.reference-mobile-menu a.reference-mobile-home {
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  color: #3f4a57;
}

.reference-mobile-menu a.reference-mobile-home .reference-mobile-arrow {
  visibility: hidden;
}

.reference-mobile-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #313a44;
}

.reference-mobile-icon svg,
.reference-mobile-arrow svg,
.reference-mobile-search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.reference-mobile-arrow {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #303943;
}

.reference-mobile-menu.is-open {
  display: block;
}

body.reference-menu-open {
  overflow: hidden;
}

/* =========================================================
           FINAL NAVIGATION SYSTEM
           Desktop: multi-level dropdowns
           Mobile: screenshot-style fixed left drawer + nested accordions
           ========================================================= */

.reference-nav-wrap {
  position: relative;
  z-index: 10000;
  background: #fff;
}

/* -------------------------
           DESKTOP NAVIGATION
           ------------------------- */
.reference-desktop-nav {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}

.reference-nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.reference-nav-link,
.reference-nav-toggle {
  min-height: 40px;
  border: 0;
  background: transparent;
  font: inherit;
}

.reference-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #263449;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.reference-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  margin-left: -7px;
  padding: 8px 7px;
  border-radius: 7px;
  color: #4f5b6b;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.reference-nav-item:hover > .reference-nav-link,
.reference-nav-item:hover > .reference-nav-toggle,
.reference-nav-item.is-open > .reference-nav-link,
.reference-nav-item.is-open > .reference-nav-toggle,
.reference-nav-link.reference-nav-active {
  background: #eef3fa;
  color: var(--reference-navy);
}

.reference-nav-chevron {
  width: 11px;
  height: 11px;
  display: block;
  transition: transform 0.2s ease;
}

.reference-nav-item.is-open > .reference-nav-toggle .reference-nav-chevron {
  transform: rotate(180deg);
}

/* Level 2 desktop dropdown */
.reference-nav-submenu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  min-width: 240px;
  padding: 7px;
  display: grid;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--reference-border);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 28px rgba(16, 38, 83, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 10020;
}

.reference-nav-submenu-item {
  position: relative;
  min-width: 0;
}

.reference-nav-submenu-link,
.reference-nav-submenu-toggle {
  min-height: 38px;
  border: 0;
  background: transparent;
}

.reference-nav-submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  color: #38465a;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.reference-nav-submenu-link:hover,
.reference-nav-submenu-link:focus-visible,
.reference-nav-submenu-item.is-open > .reference-nav-submenu-link {
  background: #eef3fa;
  color: var(--reference-navy);
  outline: none;
}

.reference-nav-submenu-link .nested-arrow {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  opacity: 0.8;
}

/* Level 3 desktop submenu */
.reference-nav-submenu--nested {
  position: absolute;
  top: -8px;
  left: calc(100% + 4px);
  min-width: 220px;
  padding: 7px;
  display: grid;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--reference-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(16, 38, 83, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 10030;
}

/* Level 3 opens only when its own parent submenu item is explicitly opened.
           Do not open it simply because the pointer is resting over the first item. */
.reference-nav-submenu-item.is-open > .reference-nav-submenu--nested {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.reference-nav-submenu-item.has-children::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 5px;
  height: 100%;
}

.reference-nav-item:hover > .reference-nav-submenu,
.reference-nav-item.is-open > .reference-nav-submenu,
.reference-nav-item:focus-within > .reference-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* -------------------------
           MOBILE DRAWER / BACKDROP
           ------------------------- */
.reference-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 38, 83, 0.18);
  z-index: 100010;
  -webkit-tap-highlight-color: transparent;
}

.reference-mobile-menu {
  position: fixed;
  top: var(--reference-mobile-top, 90px);
  left: 0;
  bottom: 0;
  width: min(84vw, 300px);
  max-width: calc(100vw - 44px);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #eef2f6;
  border-top: 1px solid #d9dee7;
  border-right: 1px solid #d0d7e0;
  box-shadow: 8px 0 24px rgba(16, 38, 83, 0.18);
  z-index: 100020;
  display: none;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-105%);
  transition: transform 0.22s ease, opacity 0.18s ease, visibility 0.22s ease;
}

.reference-mobile-menu.is-open {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.reference-mobile-backdrop.is-open {
  display: block;
}

.reference-mobile-search {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 7px 7px 8px;
  background: #eef2f6;
  border-bottom: 1px solid #d9dee7;
}

.reference-mobile-search-wrap {
  position: relative;
  width: 100%;
}

.reference-mobile-search input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 7px 10px 7px 35px;
  border: 1px solid #ced5de;
  border-radius: 3px;
  outline: none;
  background: #fff;
  color: #27364a;
  font: 500 13px/1.3 "DM Sans", Arial, sans-serif;
  box-shadow: inset 0 1px 2px rgba(16, 38, 83, 0.04);
}

.reference-mobile-search input::placeholder {
  color: #9aa3ae;
}

.reference-mobile-search input:focus {
  border-color: #9faabd;
  box-shadow: 0 0 0 2px rgba(16, 38, 83, 0.08);
}

.reference-mobile-search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: #55616f;
  pointer-events: none;
}

.reference-mobile-search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.reference-mobile-menu nav {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Every mobile row has a real arrow button separate from its link. */
.reference-mobile-link-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  min-height: 54px;
  border-bottom: 1px solid #d8dee6;
  background: transparent;
}

.reference-mobile-link-row > .reference-mobile-link,
.reference-mobile-link-row > .reference-mobile-row-toggle {
  min-width: 0;
}

.reference-mobile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 53px;
  padding: 9px 12px 9px 14px;
  color: #384452;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.reference-mobile-link:hover,
.reference-mobile-link:focus-visible,
.reference-mobile-link-row.is-open > .reference-mobile-link {
  background: #e4eaf0;
  color: var(--reference-navy);
  outline: none;
}

.reference-mobile-link-row.home-row .reference-mobile-link {
  font-weight: 600;
}

.reference-mobile-row-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  min-height: 53px;
  padding: 0;
  border: 0;
  border-left: 1px solid transparent;
  background: transparent;
  color: #303943;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reference-mobile-row-toggle:hover,
.reference-mobile-row-toggle:focus-visible,
.reference-mobile-link-row.is-open > .reference-mobile-row-toggle {
  background: #e4eaf0;
  color: var(--reference-navy);
  outline: none;
}

.reference-mobile-row-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.reference-mobile-link-row.is-open > .reference-mobile-row-toggle svg {
  transform: rotate(90deg);
}

.reference-mobile-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #313a44;
}

.reference-mobile-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Level 2 mobile submenu */
.reference-mobile-submenu {
  display: none;
  grid-column: 1 / -1;
  padding: 0;
  margin: 0;
  background: #e3e8ee;
  border-top: 1px solid #d4dbe3;
}

.reference-mobile-link-row.is-open > .reference-mobile-submenu {
  display: block;
}

.reference-mobile-submenu-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: stretch;
  margin: 0;
  border-bottom: 1px solid #d3dae2;
}

.reference-mobile-submenu-item:last-child {
  border-bottom: 0;
}

.reference-mobile-submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 10px 11px 10px 28px;
  color: #4a5665;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  background: transparent;
}

.reference-mobile-submenu-link:hover,
.reference-mobile-submenu-link:focus-visible,
.reference-mobile-submenu-item.is-open > .reference-mobile-submenu-link {
  background: #dde4eb;
  color: var(--reference-navy);
  outline: none;
}

.reference-mobile-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #414b59;
  cursor: pointer;
}

.reference-mobile-submenu-toggle:hover,
.reference-mobile-submenu-toggle:focus-visible,
.reference-mobile-submenu-item.is-open > .reference-mobile-submenu-toggle {
  background: #dde4eb;
  color: var(--reference-navy);
  outline: none;
}

.reference-mobile-submenu-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.reference-mobile-submenu-item.is-open > .reference-mobile-submenu-toggle svg {
  transform: rotate(90deg);
}

/* Level 3 mobile submenu */
.reference-mobile-submenu--nested {
  display: none;
  grid-column: 1 / -1;
  padding: 0;
  margin: 0;
  background: #d8dee5;
  border-top: 1px solid #cdd5dd;
}

.reference-mobile-submenu-item.is-open > .reference-mobile-submenu--nested {
  display: block;
}

.reference-mobile-submenu--nested a {
  display: block;
  min-height: 42px;
  padding: 10px 12px 10px 43px;
  border-bottom: 1px solid #c9d1d9;
  color: #55606e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  background: transparent;
}

.reference-mobile-submenu--nested a:last-child {
  border-bottom: 0;
}

.reference-mobile-submenu--nested a:hover,
.reference-mobile-submenu--nested a:focus-visible {
  background: #d1d8e0;
  color: var(--reference-navy);
  outline: none;
}

body.reference-menu-open {
  overflow: hidden;
  touch-action: none;
}

/* -------------------------
           HEADER BUTTON RELIABILITY
           ------------------------- */
.reference-main-actions {
  position: relative;
  z-index: 100030;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  flex-shrink: 0;
}

.reference-mobile-button {
  position: relative;
  z-index: 100040;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  padding: 0;
  border: 1px solid var(--reference-border);
  border-radius: 8px;
  background: #fff;
  color: var(--reference-navy);
  cursor: pointer;
}

.reference-mobile-button:hover,
.reference-mobile-button:focus-visible {
  background: #edf3fb;
  outline: none;
}

.reference-mobile-button-icon {
  width: 20px;
  height: 18px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.reference-mobile-button-icon span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* Desktop only */
@media (min-width: 921px) {
  .reference-mobile-button,
  .reference-mobile-menu,
  .reference-mobile-backdrop {
    display: none !important;
  }
}

/* Mobile/tablet */
@media (max-width: 920px) {
  .reference-nav-wrap,
  .reference-desktop-nav {
    display: none !important;
  }

  .reference-mobile-button {
    display: inline-flex !important;
  }

  .reference-mainbar-inner {
    min-height: 70px;
  }

  .reference-brand {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .reference-brand-logo {
    flex: 0 0 auto;
  }

  .reference-brand-copy {
    min-width: 0;
    overflow: hidden;
  }

  .reference-brand-copy strong,
  .reference-brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .reference-mobile-menu {
    display: block;
  }
}

@media (max-width: 650px) {
  .reference-mainbar-inner {
    min-height: 64px;
    gap: 8px;
  }

  .reference-main-actions {
    gap: 6px;
  }

  .reference-mobile-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .reference-mobile-menu {
    width: min(84vw, 300px);
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 450px) {
  .reference-mobile-menu {
    width: min(86vw, 292px);
    max-width: calc(100vw - 24px);
  }
}

/* =========================================================
           AIETR PUBLICATION INTRO
           ========================================================= */

.publication-hero {
  margin-bottom: 18px;
  padding: 26px 22px 28px;
  background: radial-gradient(
      circle at top right,
      rgba(246, 165, 0, 0.11),
      transparent 28%
    ),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e0e5ec;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(16, 38, 83, 0.05);
  text-align: center;
  scroll-margin-top: 155px;
}

.publication-hero-copy {
  max-width: 930px;
  margin: 0 auto;
}

.publication-hero h1 {
  margin: 0 0 8px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 37px;
  line-height: 1.12;
  font-weight: 400;
}

.publication-hero h1 span {
  display: block;
  margin-top: 7px;
  color: var(--aietr-orange-dark);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.publication-hero-description {
  max-width: 830px;
  margin: 0 auto 18px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.publication-hero-actions {
  margin-top: 3px;
}

.reference-doi-card,
.reference-doi-card .section-header,
.reference-doi-card .section-body {
  scroll-margin-top: 155px;
}

.reference-doi-header .section-title {
  max-width: 900px;
}

.reference-doi-header .section-title em {
  display: inline;
}

.reference-doi-lead {
  max-width: 920px;
  margin: 0 auto 18px;
  padding: 15px 18px;
  color: #4d5967;
  background: #f7f9fb;
  border: 1px solid #e2e7ed;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.75;
}

.reference-doi-buttons {
  margin-top: 16px;
}

.section-subtitle-inline {
  margin: 7px 0 0;
  color: var(--aietr-orange-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.reference-sponsor-intro {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--aietr-orange);
  border-radius: 7px;
  background: var(--aietr-orange-soft);
  color: var(--aietr-blue);
  font-size: 13px;
}

.sponsor-copy .button-row {
  margin-top: 5px;
}

/* Keep section anchors visible below the sticky reference header. */
#about, #doi, #sponsorship, #journals, #workflow, #resources, #support, #upcoming, #standards, #aietr-doi-registration, #aietr-doi-benefits, #infrastructure {
  scroll-margin-top: 155px;
}

/* =========================================================
           REFERENCE-STYLE HEADER RESPONSIVE RULES
           ========================================================= */

@media (max-width: 1100px) {
  .reference-brand-logo {
    width: 370px;
  }

  .reference-brand-copy strong {
    font-size: 18px;
  }

  .reference-header-button {
    padding-left: 10px;
    padding-right: 10px;
  }

  .reference-desktop-nav a {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 10.8px;
  }
}

@media (max-width: 920px) {
  #about, #doi, #sponsorship, #journals, #workflow, #resources, #support, #upcoming, #standards, #aietr-doi-registration, #aietr-doi-benefits, #infrastructure {
    scroll-margin-top: 85px;
}
  .reference-topbar-note {
    display: none;
  }

  .reference-topbar-nav {
    /* display: none; */
  }

  .reference-mainbar-inner {
    min-height: 70px;
  }

  .reference-brand-logo {
    width: 370px;
    max-width: 370px;
  }

  .reference-brand-copy {
  }

  .reference-main-actions .reference-header-button {
    display: none;
  }

  .reference-crossref-brand {
    padding: 5px 7px;
  }

  .reference-crossref-mark {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .reference-crossref-mark i {
    width: 11px;
    height: 6px;
  }

  .reference-crossref-mark .r-c1 {
    top: 3px;
    left: 9px;
  }

  .reference-crossref-mark .r-c2 {
    top: 9px;
    left: 3px;
  }

  .reference-crossref-mark .r-c3 {
    top: 15px;
    left: 9px;
  }

  .reference-crossref-copy strong {
    font-size: 11px;
  }

  .reference-crossref-copy small {
    font-size: 7px;
  }

  .reference-mobile-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .reference-mobile-menu {
    width: min(82vw, 266px);
    height: calc(100vh - 90px);
    max-height: calc(100vh - 90px);
  }

  .reference-nav-wrap {
    display: none;
  }

  .publication-hero {
    margin-top: 12px;
    padding: 22px 15px 24px;
  }

  .publication-hero h1 {
    font-size: 31px;
  }
}

@media (max-width: 650px) {
  .reference-topbar,
  .reference-topbar-inner {
    min-height: 26px;
  }

  .reference-topbar-inner {
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    flex-direction: column;
    align-content: center !important;
    gap: 0px;
  }

  .reference-topbar-nav {
    justify-content: center !important;
    margin-left: 0 !important;
}

  .reference-topbar-brand {
    margin: 0 auto;
  }

  .reference-mainbar-inner {
    min-height: 64px;
    gap: 8px;
  }

  .reference-brand-logo {
    width: 300px;
    max-width: 300px;
  }

  .reference-main-actions {
    gap: 6px;
  }

  .reference-crossref-brand {
    max-width: 126px;
  }

  .reference-crossref-copy small {
    display: none;
  }

  .reference-mobile-menu {
    height: calc(100vh - 90px);
    max-height: calc(100vh - 90px);
  }

  .publication-hero {
    padding: 19px 12px 21px;
    border-radius: 13px;
  }

  .publication-hero h1 {
    font-size: 28px;
  }

  .publication-hero h1 span {
    font-size: 10px;
    line-height: 1.45;
  }

  .publication-hero-description {
    font-size: 13px;
  }

  .reference-doi-lead {
    padding: 13px 12px;
    font-size: 13px;
  }

  .reference-doi-buttons {
    flex-direction: column;
  }

  .reference-doi-buttons .button {
    width: 100%;
    max-width: 310px;
  }

  .reference-doi-header .section-title {
    font-size: 22px;
  }

  .section-subtitle-inline {
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (max-width: 450px) {
  .reference-brand-logo {
    width: 290px;
  }

  .reference-crossref-brand {
    padding: 5px;
    display: none;
  }

  .reference-crossref-copy {
    display: none;
  }

  .reference-mobile-button {
    width: 39px;
    height: 39px;
  }
}

.center {
  text-align: center;
}

.center-row {
  display: flex;
  justify-content: center !important;
  text-align: center;
}
.journal-footer {
  width: 100%;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid var(--border);
}

.has-children a.reference-nav-submenu-link {
  border-radius: 7px 0px 0px 7px;
}

@media (max-width: 920px) {
  .reference-mainbar-inner {
    min-width: 0;
  }
  .reference-main-actions {
    flex-shrink: 0 !important;
  }
  .reference-mobile-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .reference-mobile-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-105%);
  }
  .reference-mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
  .reference-mobile-backdrop {
    visibility: hidden;
    opacity: 0;
  }
  .reference-mobile-backdrop.is-open {
    display: block;
    visibility: visible;
    opacity: 1;
  }
}
@media (min-width: 921px) {
  .reference-mobile-button,
  .reference-mobile-menu,
  .reference-mobile-backdrop {
    display: none !important;
  }
}

/* =========================================================
   FINAL NAVIGATION + FULL-WIDTH SECTION POLISH
   Only navigation presentation/behavior and section framing.
   ========================================================= */

/* ---------- Desktop main navigation ---------- */
@media (min-width: 921px) {
  .reference-desktop-nav {
    gap: 4px;
  }

  .reference-nav-item {
    position: relative;
  }

  .reference-nav-link,
  .reference-nav-toggle {
    min-height: 42px;
    border-radius: 8px;
  }

  .reference-nav-link {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
  }

  .reference-nav-toggle {
    width: 28px;
    margin-left: -8px;
    padding: 8px 7px;
  }

  /* Level 2 dropdown */
  .reference-nav-submenu {
    top: calc(100% + 1px);
    left: 0;
    min-width: 255px;
    padding: 7px;
    gap: 2px;
    border: 1px solid #d4dbe5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(16, 38, 83, 0.16),
      0 2px 6px rgba(16, 38, 83, 0.06);
  }

  .reference-nav-submenu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: stretch;
    min-width: 0;
    border-radius: 7px;
  }

  .reference-nav-submenu,
  .reference-nav-submenu--nested {
    text-align: left;
  }

  .reference-nav-submenu-link {
    grid-column: 1;
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
    border-radius: 7px 0 0 7px;
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
    line-height: 1.35;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }

  /* Do not show a duplicate arrow inside the text link. */
  .reference-nav-submenu-link > .nested-arrow {
    display: none;
  }

  .reference-nav-submenu-toggle {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0 7px 7px 0;
    color: #5a6676;
    cursor: pointer;
    background: transparent;
  }

  .reference-nav-submenu-toggle:hover,
  .reference-nav-submenu-toggle:focus-visible,
  .reference-nav-submenu-item.is-open > .reference-nav-submenu-toggle {
    background: #edf2f7;
    color: var(--reference-navy);
    outline: none;
  }

  .reference-nav-submenu-toggle .nested-arrow {
    width: 13px;
    height: 13px;
    transition: transform 0.18s ease;
  }

  .reference-nav-submenu-item.is-open
    > .reference-nav-submenu-toggle
    .nested-arrow {
    transform: rotate(90deg);
  }

  /* Level 3 fly-out */
  .reference-nav-submenu--nested {
    top: -7px;
    left: calc(100% + 7px);
    min-width: 245px;
    padding: 7px;
    gap: 2px;
    border: 1px solid #d4dbe5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(16, 38, 83, 0.16),
      0 2px 6px rgba(16, 38, 83, 0.06);
  }

  .reference-nav-submenu--nested::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 12px;
    width: 8px;
    height: 16px;
  }

  .reference-nav-submenu--nested a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #465467;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .reference-nav-submenu--nested a:hover,
  .reference-nav-submenu--nested a:focus-visible {
    background: #eef3f8;
    color: var(--reference-navy);
    outline: none;
  }

  /* Open level-3 menu when the parent level-2 text is hovered.
       The main dropdown alone never exposes its nested menus. */
  .reference-nav-submenu-item:has(> .reference-nav-submenu-link:hover)
    > .reference-nav-submenu--nested,
  .reference-nav-submenu-item:has(> .reference-nav-submenu--nested:hover)
    > .reference-nav-submenu--nested,
  .reference-nav-submenu-item:has(> .reference-nav-submenu-link:focus-visible)
    > .reference-nav-submenu--nested {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Mobile navigation ---------- */
@media (max-width: 920px) {
  .reference-mobile-menu {
    top: var(--reference-mobile-top, 98px) !important;
    height: calc(100dvh - var(--reference-mobile-top, 98px)) !important;
    max-height: calc(100dvh - var(--reference-mobile-top, 98px)) !important;
    width: min(86vw, 300px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-right: 1px solid #cdd5df !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 0px 0px 0 !important;
    background: #eef2f6 !important;
    box-shadow: 9px 0 28px rgba(16, 38, 83, 0.2) !important;
  }

  .reference-mobile-menu nav {
    padding: 0 !important;
    margin: 0 !important;
  }

  .reference-mobile-search {
    padding: 7px !important;
    margin: 0 !important;
  }

  /* The first menu row starts immediately after the search block. */
  .reference-mobile-link-row:first-child {
    margin-top: 0 !important;
  }

  .reference-mobile-link-row {
    min-height: 52px !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    border-bottom: 1px solid #d6dde5 !important;
  }

  .reference-mobile-link-row > .reference-mobile-link {
    gap: 6px !important;
    min-height: 52px !important;
    padding: 9px 10px 9px 14px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    color: #374353 !important;
  }

  .reference-mobile-link-row > .reference-mobile-link > span:last-child {
    margin-left: 0 !important;
  }

  .reference-mobile-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
  }

  .reference-mobile-row-toggle {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 52px !important;
    border-left: 1px solid rgba(205, 213, 223, 0.45) !important;
  }

  .reference-mobile-link-row.home-row .reference-mobile-row-toggle {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Level 2 */
  .reference-mobile-submenu {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #e3e8ee !important;
    border-top: 1px solid #d0d8e1 !important;
  }

  .reference-mobile-submenu-item {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    min-height: 46px !important;
    border-bottom: 1px solid #cdd5de !important;
  }

  .reference-mobile-submenu-link {
    min-height: 46px !important;
    padding: 9px 9px 9px 28px !important;
    color: #4c5969 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    line-height: 1.35 !important;
  }

  .reference-mobile-submenu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 46px !important;
    border-left: 1px solid rgba(200, 208, 217, 0.4) !important;
  }

  /* Level 3 */
  .reference-mobile-submenu--nested {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #d8dee5 !important;
    border-top: 1px solid #c6ced7 !important;
  }

  .reference-mobile-submenu--nested a {
    min-height: 43px !important;
    padding: 9px 10px 9px 43px !important;
    color: #566171 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: left !important;
    line-height: 1.35 !important;
    border-bottom: 1px solid #c6ced7 !important;
  }

  .reference-mobile-submenu--nested a:hover,
  .reference-mobile-submenu--nested a:focus-visible {
    background: #d0d7df !important;
    color: var(--reference-navy) !important;
  }

  .reference-mobile-backdrop {
    top: var(--reference-mobile-top, 98px) !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    background: rgba(16, 38, 83, 0.2) !important;
  }
}

/* ---------- Full-width section bands with constrained inner content ---------- */
main > .page.container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

main > .page > .section-card {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  background: #ffffff;
}

main > .page > .section-card > .section-header,
main > .page > .section-card > .section-body {
  width: 100% !important;
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main > .page > .section-card > .section-header {
  padding-top: 28px;
}

main > .page > .section-card > .section-body {
  padding-bottom: 30px;
}

/* Soft full-width section backgrounds */
main > .page > .section-card:nth-of-type(odd) {
  background: #f9f6f1;
}

section#sponsorship {
  background: linear-gradient(rgb(255 255 255 / 61%), rgb(255 255 255 / 72%)),
    url(floral_pattern.png) !important;
  background-color: #ffecbf !important;
}

main > .page > .section-card:nth-of-type(even) {
  background: #ffffff;
}

main > .page > .section-card#sponsorship {
  background: #f4f6f9;
}

main > .page > .section-card#support {
  background: #f9f6f1;
}

/* ---------- CodePen-style animated wave on the first section ---------- */
main > .page > .section-card#about {
  position: relative;
  padding-bottom: 100px !important;
  background: linear-gradient(-45deg, #0e3991, #102653, #3b1066, #1b0436);
  background-size: 400% 400%;
  animation: doi-gradient 15s ease infinite;
  color: #ffffff;
  overflow: hidden;
  padding-top: 30px;
}

/* Match the referenced CSS Animated Waves colour treatment. */
main > .page > .section-card#about .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

main > .page > .section-card#about .section-title {
  color: #ffffff;
}

main > .page > .section-card#about .section-title em {
  color: #ffffff;
}

main > .page > .section-card#about .section-divider {
  background: rgba(255, 255, 255, 0.28);
}

main > .page > .section-card#about .doi-prefix {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
  color: #ffffff;
}

main > .page > .section-card#about .doi-prefix strong,
main > .page > .section-card#about .doi-prefix em {
  color: #ffffff;
}

main > .page > .section-card#about .section-body .center {
  color: rgba(255, 255, 255, 0.92);
}

main > .page > .section-card#about .button-outline {
  border-color: rgba(255, 255, 255, 0.78);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

main > .page > .section-card#about .button-outline:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  color: #ffffff;
}

main > .page > .section-card#about .button-blue {
  background: rgba(255, 255, 255, 0.95);
  border-color: #ffffff;
  color: #330867;
}

main > .page > .section-card#about .button-blue:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #330867;
}

@keyframes doi-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Exact wave geometry/animation structure adapted from the referenced CodePen. */
main > .page > .section-card#about .waves {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px;
  min-height: 100px;
  max-height: 150px;
  z-index: 2;
  display: block;
  pointer-events: none;
}

main > .page > .section-card#about .parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

main > .page > .section-card#about .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

main > .page > .section-card#about .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

main > .page > .section-card#about .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

main > .page > .section-card#about .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

@media (max-width: 768px) {
  main > .page > .section-card#about {
    padding-bottom: 46px !important;
  }

  main > .page > .section-card#about .waves {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main > .page > .section-card#about {
    animation: none;
  }

  main > .page > .section-card#about .parallax > use {
    animation: none;
  }
}

/* Keep inner content comfortable on narrow screens while backgrounds stay full-width. */
@media (max-width: 650px) {
  main > .page > .section-card > .section-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  main > .page > .section-card > .section-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  main > .page > .section-card#about {
    padding-bottom: 44px !important;
  }

  main > .page > .section-card#about::after {
    height: 46px;
    -webkit-mask-size: 620px 46px;
    mask-size: 620px 46px;
  }
}

.bk-text {
  color: #102653;
}

/* =========================================================
       FINAL AIETR THEME REFINEMENT
       - Font Awesome for interface icons
       - Simple right-side header navigation
       - Supplied contact details/icons retained
       - AIETR orange + blue styling
    ========================================================== */

/* Font and icon consistency */
.ijssi-contact-section,
.site-footer {
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------
       CONTACT SECTION — SUPPLIED DETAILS + FONT AWESOME ICONS
    --------------------------------------------------------- */
.ijssi-contact-section {
  padding: 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.ijssi-contact-intro {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.ijssi-contact-intro h2 {
  margin: 0 0 8px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
}

.ijssi-contact-intro h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--aietr-orange);
  border-radius: 999px;
}

.ijssi-contact-intro p {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.75;
}

.ijssi-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.ijssi-contact-card {
  height: 100%;
  padding: 24px 20px;
  background: #ffffff;
  border: 1px solid var(--border);
  /* border-top: 3px solid var(--aietr-orange); */
  border-radius: 13px;
  text-align: center;
  box-shadow: 0 5px 18px rgba(24, 58, 91, 0.055);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.ijssi-contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--aietr-orange-border);
  box-shadow: 0 9px 24px rgba(24, 58, 91, 0.085);
}

.ijssi-contact-card-icon,
.ijssi-contact-office-header-icon,
.ijssi-office-item-icon,
.ijssi-contact-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aietr-orange-dark);
}

.ijssi-contact-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 15px;
  border-radius: 13px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  font-size: 21px;
}

.ijssi-contact-card h3 {
  margin: 0 0 8px;
  color: var(--aietr-blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.ijssi-contact-card p {
  margin: 0 0 10px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.7;
}

.ijssi-contact-card a {
  color: var(--aietr-blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}

.ijssi-contact-card a:hover {
  color: var(--aietr-orange-dark);
}

.ijssi-contact-office {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-top: 4px;
}

.ijssi-contact-office-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ijssi-contact-office-header-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 11px;
  background: var(--aietr-blue-soft);
  border: 1px solid var(--aietr-blue-border);
  color: var(--aietr-blue);
  font-size: 18px;
}

.ijssi-contact-office-header h2 {
  margin: 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.ijssi-office-details {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.ijssi-office-item {
  display: grid;
  grid-template-columns: 34px 170px minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--border);
}

.ijssi-office-item:last-child {
  border-bottom: 0;
}

.ijssi-office-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  font-size: 14px;
}

.ijssi-office-label {
  margin: 0;
  color: var(--aietr-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.ijssi-office-value {
  min-width: 0;
  margin: 0;
  color: #333;
  font-size: 12px;
  line-height: 1.7;
}

.ijssi-office-value strong {
  color: var(--text);
  font-weight: 700;
}

.ijssi-office-value a {
  color: var(--aietr-blue);
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}

.ijssi-office-value a:hover {
  color: var(--aietr-orange-dark);
}

.ijssi-contact-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 13px 15px;
  background: var(--aietr-blue-soft);
  border: 1px solid var(--aietr-blue-border);
  border-radius: 11px;
}

.ijssi-contact-note-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--aietr-blue-border);
  color: var(--aietr-blue);
  font-size: 15px;
}

.ijssi-contact-note p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.65;
}

.ijssi-contact-note strong {
  color: var(--aietr-blue);
}

/* ---------------------------------------------------------
       FOOTER HEART
    --------------------------------------------------------- */
.footer-heart {
  display: inline-block;
  margin: 0 4px;
  color: #ff4b3e;
  transform-origin: center;
  animation: aietrHeartBeat 1.35s ease-in-out infinite;
  vertical-align: -0.04em;
}

.footer-bottom .footer-accent a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer-bottom .footer-accent a:hover {
  color: var(--aietr-orange) !important;
}

@keyframes aietrHeartBeat {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.18);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.12);
  }
  56% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-heart,
  .ijssi-contact-card {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
       RESPONSIVE
    --------------------------------------------------------- */
@media (max-width: 920px) {
  .reference-main-actions {
    gap: 7px;
  }
}

@media (max-width: 767.98px) {
  .ijssi-contact-section {
    padding: 22px 15px;
  }

  .ijssi-contact-intro {
    margin-bottom: 24px;
  }

  .ijssi-contact-intro h2 {
    font-size: 24px;
  }

  .ijssi-contact-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }

  .ijssi-contact-card {
    padding: 20px 18px;
  }

  .ijssi-contact-office {
    padding: 19px 14px;
  }

  .ijssi-office-item {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    row-gap: 4px;
    column-gap: 10px;
    padding: 14px 12px;
  }

  .ijssi-office-item-icon {
    grid-row: span 2;
    margin-top: 2px;
  }

  .ijssi-office-label,
  .ijssi-office-value {
    font-size: 11px;
  }

  .ijssi-contact-note {
    align-items: flex-start;
    padding: 12px 13px;
  }
}

@media (max-width: 420px) {
  .ijssi-contact-section {
    padding: 19px 11px;
  }

  .ijssi-contact-card {
    padding: 19px 15px;
  }

  .ijssi-contact-office {
    padding: 17px 11px;
  }

  .ijssi-office-item {
    grid-template-columns: 29px minmax(0, 1fr);
    column-gap: 9px;
    padding: 13px 9px;
  }

  .ijssi-office-item-icon {
    width: 29px;
    height: 29px;
    font-size: 12px;
  }
}

/* =========================================================
   USER REQUESTED FINAL POLISH
   1. Dark main navigation with refined dropdown palette.
   2. Compact SVG arrows (no Font Awesome arrows in navigation).
   3. Mobile journal cards stack: full-width cover first, then content.
   ========================================================= */

/* ---------- Dark desktop main navigation ---------- */
.reference-nav-wrap {
  background: #102653 !important;
  border-bottom: 1px solid #1e3965 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.reference-nav-inner {
  background: transparent !important;
}

.reference-desktop-nav {
  background: transparent !important;
}

.reference-nav-link,
.reference-nav-toggle {
  color: rgba(255, 255, 255, 0.92) !important;
}

.reference-nav-link {
  background: transparent !important;
}

.reference-nav-toggle {
  background: transparent !important;
}

.reference-nav-item:hover > .reference-nav-link,
.reference-nav-item:hover > .reference-nav-toggle,
.reference-nav-item.is-open > .reference-nav-link,
.reference-nav-item.is-open > .reference-nav-toggle,
.reference-nav-link.reference-nav-active {
  background: #183a5b !important;
  color: #f6a500 !important;
}

.reference-nav-toggle:hover,
.reference-nav-toggle:focus-visible {
  color: #f6a500 !important;
  outline: none;
}

/* Compact, subtle dropdown arrows */
.reference-nav-chevron {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px;
  display: block;
  stroke-width: 1.9;
}

.reference-nav-submenu-link .nested-arrow,
.reference-nav-submenu-toggle .nested-arrow {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px;
  display: block;
  stroke-width: 1.9;
}

/* ---------- Dark dropdown / flyout ---------- */
.reference-nav-submenu,
.reference-nav-submenu--nested {
  background: #122b50 !important;
  border-color: #27486f !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 2px 7px rgba(0, 0, 0, 0.18) !important;
}

.reference-nav-submenu-link,
.reference-nav-submenu--nested a {
  color: rgba(255, 255, 255, 0.88) !important;
  background: transparent !important;
}

.reference-nav-submenu-link:hover,
.reference-nav-submenu-link:focus-visible,
.reference-nav-submenu-item.is-open > .reference-nav-submenu-link,
.reference-nav-submenu--nested a:hover,
.reference-nav-submenu--nested a:focus-visible {
  background: #183a5b !important;
  color: #f6a500 !important;
  outline: none;
}

.reference-nav-submenu-toggle {
  color: rgba(255, 255, 255, 0.72) !important;
  background: transparent !important;
}

.reference-nav-submenu-toggle:hover,
.reference-nav-submenu-toggle:focus-visible,
.reference-nav-submenu-item.is-open > .reference-nav-submenu-toggle {
  background: #183a5b !important;
  color: #f6a500 !important;
  outline: none;
}

/* ---------- Keep navigation arrow footprint small and elegant ---------- */
.reference-nav-submenu-item {
  grid-template-columns: minmax(0, 1fr) 26px !important;
}

.reference-nav-submenu-toggle {
  width: 26px !important;
  min-width: 26px !important;
}

/* ---------- Mobile menu: match dark navigation palette ---------- */
@media (max-width: 920px) {
  .reference-mobile-menu {
    background: #102653 !important;
    border-right-color: #27486f !important;
    box-shadow: 9px 0 28px rgba(0, 0, 0, 0.28) !important;
  }

  .reference-mobile-search {
    background: #102653 !important;
    border-bottom-color: #27486f !important;
  }

  .reference-mobile-menu .reference-mobile-link-row {
    background: #102653 !important;
    border-bottom-color: #214064 !important;
  }

  .reference-mobile-link-row > .reference-mobile-link,
  .reference-mobile-row-toggle {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .reference-mobile-link:hover,
  .reference-mobile-link:focus-visible,
  .reference-mobile-link-row.is-open > .reference-mobile-link,
  .reference-mobile-row-toggle:hover,
  .reference-mobile-row-toggle:focus-visible,
  .reference-mobile-link-row.is-open > .reference-mobile-row-toggle {
    background: #183a5b !important;
    color: #f6a500 !important;
  }

  .reference-mobile-submenu {
    background: #122b50 !important;
    border-top-color: #27486f !important;
  }

  .reference-mobile-submenu-item {
    border-bottom-color: #244466 !important;
  }

  .reference-mobile-submenu-link,
  .reference-mobile-submenu-toggle {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .reference-mobile-submenu-link:hover,
  .reference-mobile-submenu-link:focus-visible,
  .reference-mobile-submenu-item.is-open > .reference-mobile-submenu-link,
  .reference-mobile-submenu-toggle:hover,
  .reference-mobile-submenu-toggle:focus-visible,
  .reference-mobile-submenu-item.is-open > .reference-mobile-submenu-toggle {
    background: #183a5b !important;
    color: #f6a500 !important;
  }

  .reference-mobile-submenu--nested {
    background: #0f2445 !important;
    border-top-color: #213f62 !important;
  }

  .reference-mobile-submenu--nested a {
    color: rgba(255, 255, 255, 0.74) !important;
    border-bottom-color: #203c5e !important;
  }

  .reference-mobile-submenu--nested a:hover,
  .reference-mobile-submenu--nested a:focus-visible {
    background: #183a5b !important;
    color: #f6a500 !important;
  }

  .reference-mobile-arrow,
  .reference-mobile-submenu-toggle svg {
    width: 10px !important;
    height: 10px !important;
    stroke-width: 1.8 !important;
    color: currentColor !important;
  }

  /* ---------- Journal card: full cover, then 100% content ---------- */
  .journal-card {
    display: block !important;
    width: 100%;
  }

  .journal-cover {
    width: 100% !important;
    max-width: 100% !important;
    order: 1;
  }

  .journal-cover img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
  }

  .journal-cover-frame {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .journal-info,
  .journal-footer {
    width: 100% !important;
    max-width: 100% !important;
    order: 2;
  }

  .journal-info {
    padding: 18px 16px 0 !important;
  }

  .journal-footer {
    padding: 18px 16px 20px !important;
  }
}

@media (max-width: 450px) {
  .journal-info,
  .journal-footer {
    width: 100% !important;
  }

  .journal-info {
    padding: 16px 13px 0 !important;
  }

  .journal-footer {
    padding: 16px 13px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-nav-chevron,
  .reference-nav-submenu-toggle .nested-arrow,
  .reference-mobile-arrow {
    transition: none !important;
  }
}

/* =========================================================
   REFERENCE NAVIGATION THEME VARIANTS
   Default: nav-dark
   Alternate: nav-light

   Usage:
   <div class="reference-nav-wrap nav-dark">
   <div class="reference-nav-wrap nav-light">
   ========================================================= */

.reference-nav-wrap.nav-dark {
  --nav-bg: #102653;
  --nav-bg-hover: #183a5b;
  --nav-bg-active: #183a5b;
  --nav-text: rgba(255, 255, 255, 0.94);
  --nav-text-soft: rgba(255, 255, 255, 0.76);
  --nav-accent: #f6a500;
  --nav-border: #29496f;
  --nav-dropdown: #122b50;
  --nav-dropdown-nested: #0f2445;
  --nav-dropdown-hover: #183a5b;
  --nav-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 2px 7px rgba(0, 0, 0, 0.18);
}

.reference-nav-wrap.nav-light {
  --nav-bg: #ffffff;
  --nav-bg-hover: #f5f8fc;
  --nav-bg-active: #edf3fa;
  --nav-text: #263449;
  --nav-text-soft: #566273;
  --nav-accent: #d88a00;
  --nav-border: #dde4ec;
  --nav-dropdown: #ffffff;
  --nav-dropdown-nested: #f8fafc;
  --nav-dropdown-hover: #f5f8fc;
  --nav-shadow: 0 14px 32px rgba(16, 38, 83, 0.14),
    0 2px 7px rgba(16, 38, 83, 0.08);
}

/* Base wrapper */
.reference-nav-wrap.nav-dark,
.reference-nav-wrap.nav-light {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.reference-nav-wrap.nav-dark .reference-nav-inner,
.reference-nav-wrap.nav-light .reference-nav-inner,
.reference-nav-wrap.nav-dark .reference-desktop-nav,
.reference-nav-wrap.nav-light .reference-desktop-nav {
  background: transparent !important;
}

/* Main navigation text */
.reference-nav-wrap.nav-dark .reference-nav-link,
.reference-nav-wrap.nav-dark .reference-nav-toggle,
.reference-nav-wrap.nav-light .reference-nav-link,
.reference-nav-wrap.nav-light .reference-nav-toggle {
  color: var(--nav-text) !important;
}

.reference-nav-wrap.nav-dark .reference-nav-link,
.reference-nav-wrap.nav-light .reference-nav-link,
.reference-nav-wrap.nav-dark .reference-nav-toggle,
.reference-nav-wrap.nav-light .reference-nav-toggle {
  background: transparent !important;
}

.reference-nav-wrap.nav-dark .reference-nav-item:hover > .reference-nav-link,
.reference-nav-wrap.nav-dark .reference-nav-item:hover > .reference-nav-toggle,
.reference-nav-wrap.nav-dark .reference-nav-item.is-open > .reference-nav-link,
.reference-nav-wrap.nav-dark
  .reference-nav-item.is-open
  > .reference-nav-toggle,
.reference-nav-wrap.nav-dark .reference-nav-link.reference-nav-active,
.reference-nav-wrap.nav-light .reference-nav-item:hover > .reference-nav-link,
.reference-nav-wrap.nav-light .reference-nav-item:hover > .reference-nav-toggle,
.reference-nav-wrap.nav-light .reference-nav-item.is-open > .reference-nav-link,
.reference-nav-wrap.nav-light
  .reference-nav-item.is-open
  > .reference-nav-toggle,
.reference-nav-wrap.nav-light .reference-nav-link.reference-nav-active {
  background: var(--nav-bg-hover) !important;
  color: var(--nav-accent) !important;
}

.reference-nav-wrap.nav-dark .reference-nav-toggle:hover,
.reference-nav-wrap.nav-dark .reference-nav-toggle:focus-visible,
.reference-nav-wrap.nav-light .reference-nav-toggle:hover,
.reference-nav-wrap.nav-light .reference-nav-toggle:focus-visible {
  color: var(--nav-accent) !important;
  outline: none;
}

/* Readable, properly sized SVG chevrons */
.reference-nav-wrap .reference-nav-chevron {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  display: block !important;
  flex: 0 0 14px !important;
  stroke-width: 2.25 !important;
  vector-effect: non-scaling-stroke;
}

.reference-nav-wrap .nested-arrow {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  display: block !important;
  flex: 0 0 13px !important;
  stroke-width: 2.15 !important;
  vector-effect: non-scaling-stroke;
}

.reference-nav-wrap .reference-nav-toggle {
  width: 30px !important;
  min-width: 30px !important;
  padding: 7px 7px !important;
}

.reference-nav-wrap .reference-nav-submenu-toggle {
  width: 30px !important;
  min-width: 30px !important;
}

/* Dropdown / flyout */
.reference-nav-wrap.nav-dark .reference-nav-submenu,
.reference-nav-wrap.nav-light .reference-nav-submenu {
  background: var(--nav-dropdown) !important;
  border-color: var(--nav-border) !important;
  box-shadow: var(--nav-shadow) !important;
}

.reference-nav-wrap.nav-dark .reference-nav-submenu-link,
.reference-nav-wrap.nav-dark .reference-nav-submenu--nested a,
.reference-nav-wrap.nav-dark .reference-nav-submenu-toggle,
.reference-nav-wrap.nav-light .reference-nav-submenu-link,
.reference-nav-wrap.nav-light .reference-nav-submenu--nested a,
.reference-nav-wrap.nav-light .reference-nav-submenu-toggle {
  color: var(--nav-text) !important;
  background: transparent !important;
}

.reference-nav-wrap.nav-dark .reference-nav-submenu-link:hover,
.reference-nav-wrap.nav-dark .reference-nav-submenu-link:focus-visible,
.reference-nav-wrap.nav-dark
  .reference-nav-submenu-item.is-open
  > .reference-nav-submenu-link,
.reference-nav-wrap.nav-dark .reference-nav-submenu--nested a:hover,
.reference-nav-wrap.nav-dark .reference-nav-submenu--nested a:focus-visible,
.reference-nav-wrap.nav-dark .reference-nav-submenu-toggle:hover,
.reference-nav-wrap.nav-dark .reference-nav-submenu-toggle:focus-visible,
.reference-nav-wrap.nav-dark
  .reference-nav-submenu-item.is-open
  > .reference-nav-submenu-toggle,
.reference-nav-wrap.nav-light .reference-nav-submenu-link:hover,
.reference-nav-wrap.nav-light .reference-nav-submenu-link:focus-visible,
.reference-nav-wrap.nav-light
  .reference-nav-submenu-item.is-open
  > .reference-nav-submenu-link,
.reference-nav-wrap.nav-light .reference-nav-submenu--nested a:hover,
.reference-nav-wrap.nav-light .reference-nav-submenu--nested a:focus-visible,
.reference-nav-wrap.nav-light .reference-nav-submenu-toggle:hover,
.reference-nav-wrap.nav-light .reference-nav-submenu-toggle:focus-visible,
.reference-nav-wrap.nav-light
  .reference-nav-submenu-item.is-open
  > .reference-nav-submenu-toggle {
  background: var(--nav-dropdown-hover) !important;
  color: var(--nav-accent) !important;
  outline: none;
}

.reference-nav-wrap.nav-dark .reference-nav-submenu--nested,
.reference-nav-wrap.nav-light .reference-nav-submenu--nested {
  background: var(--nav-dropdown-nested) !important;
  border-color: var(--nav-border) !important;
  box-shadow: var(--nav-shadow) !important;
}

/* Keep the arrow column comfortable without making it oversized */
.reference-nav-wrap .reference-nav-submenu-item {
  grid-template-columns: minmax(0, 1fr) 30px !important;
}

/* =========================================================
   AIETR FIXED DROPDOWN NAVIGATION
   - One arrow per nested item (the dedicated toggle button)
   - Desktop dropdowns open only from explicit JS state
   - No :hover/:focus-within rules can unexpectedly reopen a menu
   - Mobile accordion behavior remains independent
   ========================================================= */
@media (min-width: 921px) {
  /* Main level: make the toggle a clean arrow-only control. */
  .reference-nav-toggle {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

  .reference-nav-chevron {
    pointer-events: none;
  }

  /* Kill the duplicate arrow that older styles can expose inside the text link. */
  .reference-nav-submenu-link > .nested-arrow {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    flex-basis: 0 !important;
  }

  /* Desktop level 2: hidden until parent has .is-open. */
  .reference-nav-item > .reference-nav-submenu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
  }

  .reference-nav-item.is-open > .reference-nav-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Desktop level 3: hidden until its own parent gets .is-open. */
  .reference-nav-submenu-item > .reference-nav-submenu--nested {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(6px) !important;
  }

  .reference-nav-submenu-item.is-open > .reference-nav-submenu--nested {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  /* The small pointer bridge prevents a gap between level 2 and level 3 from
       becoming a visual/interaction artefact. It is not an arrow. */
  .reference-nav-submenu-item.has-children::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    width: 8px;
    height: 100%;
    background: transparent;
  }

  /* Keep the dedicated arrow button aligned and never show a second one. */
  .reference-nav-submenu-toggle .nested-arrow {
    display: block !important;
    visibility: visible !important;
    pointer-events: none;
  }

  /* Only the actual state controls the visual highlight. */
  .nav-light .reference-nav-item:not(.is-open) > .reference-nav-toggle {
    color: #102653 !important;
  }
  .reference-nav-item:not(.is-open) > .reference-nav-toggle {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  /* Keyboard focus remains visible without reopening the menu by CSS. */
  .reference-nav-link:focus-visible,
  .reference-nav-toggle:focus-visible,
  .reference-nav-submenu-link:focus-visible,
  .reference-nav-submenu-toggle:focus-visible {
    outline: 2px solid rgba(246, 165, 0, 0.72);
    outline-offset: 2px;
  }
}

@media (max-width: 920px) {
  /* Mobile nested text links never render an extra desktop arrow. */
  .reference-mobile-submenu-link > .nested-arrow {
    display: none !important;
  }
}

/* =========================================================
   AIETR INNER PAGE / THEME COMPONENT SHOWCASE
   Page-specific styles only. Core theme tokens/components remain
   inherited from the original page CSS above.
   ========================================================= */
.inner-demo {
  padding: 24px 0 55px;
}

.inner-demo .demo-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 48px 28px 42px;
  border: 1px solid #dde5ee;
  border-radius: 18px;
  background: radial-gradient(
      circle at 12% 10%,
      rgba(246, 165, 0, 0.16),
      transparent 24%
    ),
    radial-gradient(circle at 92% 0%, rgba(16, 38, 83, 0.1), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #fff9ec 100%);
  box-shadow: 0 8px 30px rgba(16, 38, 83, 0.06);
  text-align: center;
}

.inner-demo .demo-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border: 28px solid rgba(246, 165, 0, 0.1);
  border-radius: 50%;
}

.demo-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
}

.demo-hero .eyebrow {
  color: var(--aietr-orange-dark);
}

.demo-hero h1 {
  margin: 0 0 10px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  font-weight: 400;
}

.demo-hero h1 em {
  color: var(--aietr-orange-dark);
}

.demo-hero .hero-subtitle {
  margin: 0 0 13px;
  color: var(--aietr-orange-dark);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(20px, 3vw, 28px);
}

.demo-hero-description {
  max-width: 800px;
  margin: 0 auto 20px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.85;
}

.demo-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.demo-kpi {
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
}

.demo-kpi strong {
  display: block;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 400;
}

.demo-kpi span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.demo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.demo-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.demo-panel {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.demo-panel.soft {
  background: var(--surface-2);
}
.demo-panel.orange {
  background: var(--aietr-orange-soft);
  border-color: var(--aietr-orange-border);
}
.demo-panel.blue {
  background: var(--aietr-blue-soft);
  border-color: var(--aietr-blue-border);
}

.demo-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f0eee9;
  border: 1px solid var(--border);
  color: #625d56;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.demo-display {
  margin: 7px 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 42px;
  line-height: 1.06;
  font-weight: 400;
}

.demo-italic {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 21px;
  font-style: italic;
  color: var(--aietr-orange-dark);
}

.demo-inline-link {
  color: var(--aietr-orange-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.demo-blockquote {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--aietr-orange);
  border-radius: 0 9px 9px 0;
  background: #fff9e9;
  color: #4a4f56;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.55;
}

.demo-code {
  overflow-x: auto;
  margin: 10px 0 0;
  padding: 13px 14px;
  border: 1px solid #d8e0e8;
  border-radius: 9px;
  background: #102653;
  color: #f7fafc;
  font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.demo-alert {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid;
  border-radius: 10px;
}

.demo-alert strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}
.demo-alert p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.65;
}
.demo-alert.info {
  color: var(--reference-navy);
  background: var(--reference-blue-soft, #edf4f9);
  border-color: var(--reference-blue-border, #c8d8e5);
}
.demo-alert.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
.demo-alert.warning {
  color: #805a00;
  background: var(--aietr-orange-soft);
  border-color: var(--aietr-orange-border);
}
.demo-alert-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid currentColor;
}

.demo-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.demo-field {
  display: grid;
  gap: 5px;
}
.demo-field.full {
  grid-column: 1 / -1;
}
.demo-field label {
  color: var(--aietr-blue);
  font-size: 11px;
  font-weight: 800;
}
.demo-field input,
.demo-field select,
.demo-field textarea {
  width: 100%;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.demo-field textarea {
  min-height: 100px;
  resize: vertical;
}
.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
  border-color: var(--aietr-orange-dark);
  box-shadow: 0 0 0 3px rgba(246, 165, 0, 0.14);
}

.demo-checks {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.demo-check {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-soft);
  font-size: 12px;
}
.demo-check input {
  accent-color: var(--aietr-blue);
}

.demo-table-wrap {
  overflow-x: auto;
}
.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.demo-table th,
.demo-table td {
  padding: 10px 11px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.demo-table th {
  color: var(--aietr-blue);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
}
.demo-table td {
  color: var(--text-soft);
}
.demo-table tr:last-child td {
  border-bottom: 0;
}
.demo-table .price {
  color: var(--aietr-blue);
  font-weight: 800;
}

.demo-journal-cover {
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.85)
    ),
    linear-gradient(135deg, #102653 0%, #183a5b 52%, #f6a500 100%);
  color: #fff;
}
.demo-journal-cover .cover-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 25px;
  line-height: 1.1;
}
.demo-journal-cover .cover-meta {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.demo-spacing {
  display: grid;
  gap: 6px;
}
.demo-spacing div {
  border: 1px dashed var(--border-dark);
  border-radius: 7px;
  padding: 9px;
  color: var(--text-soft);
  font-size: 10px;
}

.demo-footer-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.7;
}

@media (max-width: 920px) {
  .demo-kpis,
  .demo-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-hero {
    padding: 36px 20px 32px !important;
  }
}

@media (max-width: 650px) {
  .inner-demo {
    padding-top: 16px;
  }
  .demo-kpis,
  .demo-grid-2,
  .demo-grid-3,
  .demo-grid-4,
  .demo-form {
    grid-template-columns: 1fr;
  }
  .demo-field.full {
    grid-column: auto;
  }
  .demo-hero h1 {
    font-size: 42px;
  }
  .demo-display {
    font-size: 34px;
  }
}

/* =========================================================
   FINAL DESKTOP HOVER NAVIGATION FIX
   - Level 1 opens on hover.
   - Level 2 / fly-out submenu opens on hover of its parent row.
   - One visible arrow only: the dedicated submenu toggle icon.
   - Small overlap removes hover gaps between menu levels.
   ========================================================= */
@media (min-width: 921px) {
  /* Main dropdown: open while the parent navigation item is hovered/focused. */
  .reference-nav-item > .reference-nav-submenu {
    top: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(4px) !important;
  }

  .reference-nav-item:hover > .reference-nav-submenu,
  .reference-nav-item:focus-within > .reference-nav-submenu,
  .reference-nav-item.is-open > .reference-nav-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Fly-out submenu: open as soon as the level-2 row is hovered/focused. */
  .reference-nav-submenu-item > .reference-nav-submenu--nested {
    top: -1px !important;
    left: calc(100% - 1px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(4px) !important;
  }

  .reference-nav-submenu-item:hover > .reference-nav-submenu--nested,
  .reference-nav-submenu-item:focus-within > .reference-nav-submenu--nested,
  .reference-nav-submenu-item.is-open > .reference-nav-submenu--nested {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  /* Stable pointer bridge/overlap between level 2 and level 3. */
  .reference-nav-submenu-item.has-children::after {
    content: "" !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    width: 8px !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 2;
  }

  .reference-nav-submenu--nested::before {
    content: "" !important;
    position: absolute !important;
    left: -6px !important;
    top: 0 !important;
    width: 8px !important;
    height: 100% !important;
    background: transparent !important;
  }

  /* Never show a second arrow inside the text anchor. */
  .reference-nav-submenu-link > .nested-arrow,
  .reference-nav-submenu-link::after {
    display: none !important;
    content: none !important;
  }

  /* Exactly one arrow: the dedicated button beside a nested item. */
  .reference-nav-submenu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
  }

  .reference-nav-submenu-toggle .nested-arrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 13px !important;
    height: 13px !important;
    transform: none;
  }

  .reference-nav-submenu-item.is-open
    > .reference-nav-submenu-toggle
    .nested-arrow {
    transform: rotate(90deg) !important;
  }

  /* Hover itself is the visual open state, so it remains correct even with JS disabled. */
  .reference-nav-submenu-item:hover > .reference-nav-submenu-toggle,
  .reference-nav-submenu-item:focus-within > .reference-nav-submenu-toggle {
    background: var(--nav-dropdown-hover, #183a5b) !important;
    color: var(--nav-accent, #f6a500) !important;
  }
}

/* =========================================================
   EXPANDED INNER THEME SHOWCASE
   Typography columns, forms, response messages, certificate search,
   dashboard, tables, filters and utility UI.
   ========================================================= */

/* Typography column samples */
.type-column-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.type-column {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 190px;
}
.type-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.type-column-number {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
  font-size: 11px;
  font-weight: 800;
}
.type-column-label {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.type-column .display-lg {
  margin: 0 0 7px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 400;
}
.type-column .display-md {
  margin: 0 0 7px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 400;
}
.type-column .body-lg {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.75;
}
.type-column .body-sm {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.65;
}
.type-column .utility {
  margin: 0;
  color: var(--aietr-orange-dark);
  font-size: 10px;
  line-height: 1.45;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.type-column .serif-italic {
  margin: 0;
  color: var(--aietr-orange-dark);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
}
.type-column .mono {
  display: block;
  padding: 7px 8px;
  border-radius: 7px;
  background: #102653;
  color: #fff;
  font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Form showcase */
.form-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ui-form-card {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.ui-form-card.alt {
  background: var(--surface-2);
}
.ui-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ui-form-title {
  margin: 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 400;
}
.ui-form-subtitle {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.ui-form-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}
.ui-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.ui-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.ui-field.full {
  grid-column: 1/-1;
}
.ui-field label {
  color: var(--aietr-blue);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}
.ui-field small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-height: 39px;
  padding: 9px 10px;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  outline: 0;
  font: inherit;
  font-size: 11.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ui-textarea {
  min-height: 88px;
  resize: vertical;
}
.ui-input::placeholder,
.ui-textarea::placeholder {
  color: #9b978f;
}
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  border-color: var(--aietr-orange-dark);
  box-shadow: 0 0 0 3px rgba(246, 165, 0, 0.14);
}
.ui-input.is-error,
.ui-select.is-error,
.ui-textarea.is-error {
  border-color: #c95a4a;
  background: #fff8f7;
}
.ui-input.is-success,
.ui-select.is-success {
  border-color: var(--success);
  background: #fbfffd;
}
.ui-field-error {
  color: #b23a2a;
  font-size: 9.5px;
  line-height: 1.45;
  font-weight: 700;
}
.ui-field-success {
  color: var(--success);
  font-size: 9.5px;
  line-height: 1.45;
  font-weight: 700;
}
.ui-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ui-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 11px;
}
.ui-choice input {
  accent-color: var(--aietr-blue);
}
.ui-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 3px;
}
.ui-form-note {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.6;
}
.password-wrap {
  position: relative;
}
.password-wrap .ui-input {
  padding-right: 36px;
}
.password-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #6c7480;
  cursor: pointer;
}
.password-eye:hover {
  background: var(--surface-2);
  color: var(--aietr-blue);
}

/* Certificate search */
.certificate-search-panel {
  padding: 18px;
  border: 1px solid var(--aietr-blue-border);
  border-radius: 12px;
  background: linear-gradient(135deg, #f4f8fb 0%, #ffffff 100%);
}
.certificate-search-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}
.certificate-input label {
  display: block;
  margin-bottom: 5px;
  color: var(--aietr-blue);
  font-size: 10px;
  font-weight: 800;
}
.certificate-result {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid var(--success-border);
  border-radius: 9px;
  background: var(--success-soft);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.certificate-result-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--success-border);
  color: var(--success);
}
.certificate-result strong {
  color: var(--success);
  font-size: 12px;
}
.certificate-result p {
  margin: 2px 0 0;
  color: #48635b;
  font-size: 10.5px;
  line-height: 1.55;
}

/* Response messages */
.response-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.response-message {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 12px;
  border: 1px solid;
  border-radius: 10px;
}
.response-message-icon {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff;
  border: 1px solid currentColor;
}
.response-message strong {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
}
.response-message p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
}
.response-message.info {
  color: var(--aietr-blue);
  background: var(--aietr-blue-soft);
  border-color: var(--aietr-blue-border);
}
.response-message.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-border);
}
.response-message.warning {
  color: #815a00;
  background: var(--aietr-orange-soft);
  border-color: var(--aietr-orange-border);
}
.response-message.error {
  color: #a7382b;
  background: #fff5f3;
  border-color: #e5b5ad;
}

/* Dashboard */
.dashboard-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d8e0e8;
  border-radius: 14px;
  background: #f8fafc;
}
.dashboard-sidebar {
  padding: 16px 12px;
  background: #102653;
  color: #fff;
}
.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dashboard-brand-mark {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--aietr-orange);
  color: #102653;
  font-weight: 900;
}
.dashboard-brand strong {
  font-size: 12px;
  line-height: 1.2;
}
.dashboard-brand span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 8.5px;
}
.dashboard-nav {
  display: grid;
  gap: 3px;
  margin-top: 13px;
}
.dashboard-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
}
.dashboard-nav a:hover,
.dashboard-nav a.active {
  background: #183a5b;
  color: var(--aietr-orange);
}
.dashboard-main {
  min-width: 0;
  padding: 15px;
}
.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dashboard-greeting h3 {
  margin: 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 400;
}
.dashboard-greeting p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.dashboard-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
  font-size: 11px;
  font-weight: 800;
}
.dashboard-user strong {
  display: block;
  color: var(--aietr-blue);
  font-size: 10.5px;
}
.dashboard-user span {
  display: block;
  color: var(--muted);
  font-size: 8.5px;
}
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dashboard-stat {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dashboard-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.dashboard-stat-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dashboard-stat-icon {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}
.dashboard-stat strong {
  display: block;
  margin-top: 7px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 23px;
  line-height: 1;
  font-weight: 400;
}
.dashboard-stat small {
  display: block;
  margin-top: 4px;
  color: var(--success);
  font-size: 8.5px;
  font-weight: 700;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 9px;
  margin-top: 9px;
}
.dashboard-card {
  padding: 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dashboard-card h4 {
  margin: 0 0 8px;
  color: var(--aietr-blue);
  font-size: 12px;
  font-weight: 800;
}
.dashboard-list {
  display: grid;
  gap: 6px;
}
.dashboard-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid #ece9e3;
  border-radius: 8px;
  background: var(--surface-2);
}
.dashboard-list-item strong {
  color: var(--aietr-blue);
  font-size: 10px;
}
.dashboard-list-item span {
  color: var(--text-soft);
  font-size: 9px;
}
.dashboard-progress {
  display: grid;
  gap: 8px;
}
.progress-row {
  display: grid;
  gap: 4px;
}
.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-soft);
  font-size: 9.5px;
}
.progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #eceae5;
}
.progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--aietr-orange);
}
.dashboard-table-wrap {
  margin-top: 9px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dashboard-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 10px;
}
.dashboard-table th,
.dashboard-table td {
  padding: 8px 9px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.dashboard-table th {
  background: var(--surface-2);
  color: var(--aietr-blue);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard-table td {
  color: var(--text-soft);
}
.dashboard-table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 1050px) {
  .type-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .response-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .certificate-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .form-layout-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-shell {
    grid-template-columns: 1fr;
  }
  .dashboard-sidebar {
    padding: 10px 12px;
  }
  .dashboard-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: auto;
  }
  .dashboard-nav a {
    justify-content: center;
    white-space: nowrap;
  }
}
@media (max-width: 650px) {
  .type-column-grid,
  .response-grid,
  .ui-form,
  .certificate-search-grid,
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .ui-field.full {
    grid-column: auto;
  }
  .dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-topbar {
    align-items: flex-start;
  }
}

/* =========================================================
   TRUE HOVER NAVIGATION FIX
   Desktop dropdowns open while the pointer is anywhere over
   the complete menu row, including text and arrow controls.
   The small invisible hover bridges eliminate the gap that
   caused the menu to disappear while moving the cursor down.
   ========================================================= */
@media (min-width: 921px) {
  /* Keep the top-level dropdown physically attached to its parent. */
  .reference-desktop-nav .reference-nav-submenu {
    top: calc(100% - 1px) !important;
    left: 0 !important;
  }

  /* Invisible bridge between top navigation and level-2 dropdown. */
  .reference-desktop-nav .reference-nav-submenu::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 0;
    width: 100%;
    height: 10px;
    background: transparent;
    pointer-events: auto;
  }

  /* The whole top-level item is the hover target: text + icon. */
  .reference-desktop-nav .reference-nav-item:hover > .reference-nav-submenu,
  .reference-desktop-nav
    .reference-nav-item:focus-within
    > .reference-nav-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .reference-desktop-nav .reference-nav-item:hover > .reference-nav-link,
  .reference-desktop-nav .reference-nav-item:hover > .reference-nav-toggle,
  .reference-desktop-nav .reference-nav-item:focus-within > .reference-nav-link,
  .reference-desktop-nav
    .reference-nav-item:focus-within
    > .reference-nav-toggle {
    background: #eef3fa !important;
    color: var(--reference-navy) !important;
  }

  /* Level-2 item: text AND arrow button are one hover surface. */
  .reference-desktop-nav
    .reference-nav-submenu-item:hover
    > .reference-nav-submenu-link,
  .reference-desktop-nav
    .reference-nav-submenu-item:hover
    > .reference-nav-submenu-toggle,
  .reference-desktop-nav
    .reference-nav-submenu-item:focus-within
    > .reference-nav-submenu-link,
  .reference-desktop-nav
    .reference-nav-submenu-item:focus-within
    > .reference-nav-submenu-toggle {
    background: #eef3fa !important;
    color: var(--reference-navy) !important;
    outline: none;
  }

  /* Show the level-3 fly-out for the COMPLETE row, not just its text. */
  .reference-desktop-nav
    .reference-nav-submenu-item.has-children:hover
    > .reference-nav-submenu--nested,
  .reference-desktop-nav
    .reference-nav-submenu-item.has-children:focus-within
    > .reference-nav-submenu--nested {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Keep the level-3 arrow independent and visible as a single icon. */
  .reference-desktop-nav
    .reference-nav-submenu-item.has-children
    > .reference-nav-submenu-toggle
    .nested-arrow {
    display: block !important;
    opacity: 1 !important;
  }

  .reference-desktop-nav
    .reference-nav-submenu-item.has-children:hover
    > .reference-nav-submenu-toggle,
  .reference-desktop-nav
    .reference-nav-submenu-item.has-children:focus-within
    > .reference-nav-submenu-toggle {
    color: var(--reference-navy) !important;
    background: #edf2f7 !important;
  }

  .reference-desktop-nav
    .reference-nav-submenu-item.has-children:hover
    > .reference-nav-submenu-toggle
    .nested-arrow,
  .reference-desktop-nav
    .reference-nav-submenu-item.has-children:focus-within
    > .reference-nav-submenu-toggle
    .nested-arrow {
    transform: rotate(90deg);
  }

  /* Invisible bridge between level-2 row and level-3 fly-out. */
  .reference-desktop-nav .reference-nav-submenu--nested::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 12px;
    background: transparent;
    pointer-events: auto;
  }

  /* Do not let a translated hidden state create a mouse dead-zone. */
  .reference-desktop-nav .reference-nav-submenu,
  .reference-desktop-nav .reference-nav-submenu--nested {
    will-change: opacity, transform;
  }
}

/* =========================================================
   NEWS / ANNOUNCEMENT SHOWCASE
   ========================================================= */
.announcement-showcase {
  display: grid;
  gap: 10px;
}
.announcement-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.announcement-label {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.announcement-label.news {
  background: var(--reference-navy);
}
.announcement-label.announcement {
  background: var(--aietr-orange-dark);
  color: #fff;
}
.announcement-label.notice {
  background: var(--success);
}
.announcement-marquee {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.announcement-track {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 40px;
  padding: 11px 0 11px 14px;
  animation: announcement-marquee 24s linear infinite;
}
.announcement-track:hover {
  animation-play-state: paused;
}
.announcement-track span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}
.announcement-track strong {
  color: var(--aietr-blue);
}
.announcement-track .dot {
  color: var(--aietr-orange-dark);
  font-weight: 900;
}
@keyframes announcement-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.announcement-modern {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--aietr-blue-border);
  border-left: 4px solid var(--reference-navy);
  border-radius: 11px;
  background: linear-gradient(135deg, #f4f8fb 0%, #ffffff 100%);
}
.announcement-modern-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--aietr-blue-border);
  color: var(--reference-navy);
}
.announcement-modern h3 {
  margin: 0 0 2px;
  color: var(--aietr-blue);
  font-size: 15px;
  font-weight: 800;
}
.announcement-modern p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12;
  line-height: 1.55;
}
.announcement-modern .button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 10px;
}
.announcement-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.announcement-card {
  padding: 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}
.announcement-card .tag {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 8px;
  margin-bottom: 7px;
  border-radius: 6px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.announcement-card h4 {
  margin: 0 0 4px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 400;
}
.announcement-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.6;
}
.announcement-card.news {
  border-top: 3px solid var(--reference-navy);
}
.announcement-card.news .tag {
  background: var(--aietr-blue-soft);
  border: 1px solid var(--aietr-blue-border);
  color: var(--reference-navy);
}
.announcement-card.call {
  border-top: 3px solid var(--aietr-orange);
  background: linear-gradient(135deg, #fff9e9, #fff);
}
.announcement-card.call .tag {
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}
.announcement-card.success {
  border-top: 3px solid var(--success);
  background: linear-gradient(135deg, #f3fbf8, #fff);
}
.announcement-card.success .tag {
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
}
.announcement-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1px solid #e5b5ad;
  background: #fff5f3;
  color: #a7382b;
}
.announcement-alert i {
  margin-top: 2px;
}
.announcement-alert strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
}
.announcement-alert span {
  display: block;
  color: #6f514c;
  font-size: 10px;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .announcement-stack {
    grid-template-columns: 1fr;
  }
  .announcement-modern {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .announcement-modern .button {
    grid-column: 2;
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-track {
    animation: none;
  }
}

/* =========================================================
   AIETR PORTAL / RECORDS SHOWCASE
   Dashboard, responsive tables, stepper forms, ID cards,
   certificate cards, candidate, manuscript and centre records.
========================================================= */

.portal-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.portal-panel {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 4px 16px rgba(24, 58, 91, 0.035);
}
.portal-panel.soft {
  background: var(--surface-2);
}
.portal-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.portal-panel-title {
  margin: 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.portal-panel-subtitle {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.portal-panel-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}

/* Dashboard enhancement */
.dashboard-shell.attractive {
  grid-template-columns: 220px minmax(0, 1fr);
  background: linear-gradient(135deg, #f8fafc, #fff);
}
.dashboard-sidebar.attractive {
  background: linear-gradient(180deg, #102653 0%, #183a5b 100%);
  position: relative;
}
.dashboard-sidebar.attractive::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(246, 165, 0, 0.1));
  pointer-events: none;
}
.dashboard-stat.featured {
  background: linear-gradient(135deg, #fff8e5, #fff);
  border-color: var(--aietr-orange-border);
}
.dashboard-stat .stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 8px;
  font-weight: 800;
}
.dashboard-card.elevated {
  box-shadow: 0 7px 20px rgba(16, 44, 69, 0.055);
}
.dashboard-card .mini-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dashboard-card .mini-toolbar select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text-soft);
  font: 9px inherit;
}

/* Responsive data table */
.portal-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.portal-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10.5px;
}
.portal-table th,
.portal-table td {
  padding: 10px 11px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.portal-table th {
  background: linear-gradient(180deg, #f8f6f1, #f1eee8);
  color: var(--aietr-blue);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  font-weight: 800;
  white-space: nowrap;
}
.portal-table th:first-child {
  border-top-left-radius: 10px;
}
.portal-table th:last-child {
  border-top-right-radius: 10px;
}
.portal-table td {
  color: var(--text-soft);
  background: #fff;
}
.portal-table tr:last-child td {
  border-bottom: 0;
}
.portal-table tbody tr:hover td {
  background: #fffcf5;
}
.portal-table .primary-cell {
  color: var(--aietr-blue);
  font-weight: 800;
}
.portal-table .sub-cell {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 500;
}
.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.table-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--aietr-blue);
  font-size: 8.5px;
  font-weight: 800;
  text-decoration: none;
}
.table-action:hover {
  background: var(--aietr-orange-soft);
  border-color: var(--aietr-orange-border);
}
.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 11px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
}
.table-page-controls {
  display: flex;
  gap: 4px;
}
.table-page-controls button {
  min-width: 25px;
  height: 25px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--aietr-blue);
  font-size: 9px;
  font-weight: 800;
}
.table-page-controls button.active {
  background: var(--aietr-blue);
  border-color: var(--aietr-blue);
  color: #fff;
}

/* Multi-step form */
.stepper-form {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
}
.stepper-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8fbfd, #fff);
  border-bottom: 1px solid var(--border);
}
.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.stepper-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.stepper-step .step-number {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 9px;
}
.stepper-step.active {
  border-color: var(--aietr-orange-border);
  background: var(--aietr-orange-soft);
  color: var(--aietr-blue);
}
.stepper-step.active .step-number {
  background: var(--aietr-orange);
  border-color: var(--aietr-orange);
  color: #1f2933;
}
.stepper-step.complete {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--success);
}
.stepper-step.complete .step-number {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.stepper-body {
  padding: 16px;
}
.step-pane {
  display: none;
}
.step-pane.active {
  display: block;
}
.step-pane-title {
  margin: 0 0 3px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}
.step-pane-copy {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 9.5px;
}
.stepper-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.stepper-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece8df;
  margin-top: 10px;
}
.stepper-progress-bar {
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--aietr-orange),
    var(--aietr-orange-dark)
  );
  transition: width 0.25s ease;
}

/* Candidate identity card */
.identity-card {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #d7dfe7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 58, 91, 0.06);
}
.identity-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  padding: 18px;
  background: linear-gradient(145deg, #102653, #183a5b);
}
.identity-photo-box {
  width: 104px;
  height: 126px;
  border-radius: 10px;
  border: 4px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, #f3d38a, #fff7e4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b5a12;
  font-size: 35px;
  font-weight: 800;
}
.identity-main {
  min-width: 0;
  padding: 18px;
}
.identity-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.identity-main h3 {
  margin: 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}
.identity-main .candidate-code {
  margin-top: 2px;
  color: var(--aietr-orange-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}
.identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 13px;
}
.identity-item {
  padding: 8px 9px;
  border-radius: 8px;
  background: var(--surface-2);
}
.identity-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.identity-value {
  display: block;
  color: var(--aietr-blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}
.identity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Status timeline */
.status-timeline {
  position: relative;
  display: grid;
  gap: 0;
}
.status-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  position: relative;
  padding-bottom: 14px;
}
.status-step:last-child {
  padding-bottom: 0;
}
.status-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 29px;
  bottom: 0;
  width: 1px;
  background: var(--border-dark);
}
.status-dot {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
  z-index: 1;
}
.status-step.complete .status-dot {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.status-step.current .status-dot {
  background: var(--aietr-orange);
  border-color: var(--aietr-orange);
  color: #1f2933;
}
.status-step.pending .status-dot {
  background: var(--surface-2);
}
.status-content {
  padding: 2px 0;
}
.status-content h4 {
  margin: 0;
  color: var(--aietr-blue);
  font-size: 11px;
}
.status-content p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}
.status-meta {
  display: inline-flex;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 8px;
  font-weight: 800;
}

/* Certificate */
.certificate-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--aietr-orange-border);
  border-radius: 14px;
  background: linear-gradient(135deg, #fffdf7 0%, #fff7e4 42%, #fff 100%);
  box-shadow: 0 8px 24px rgba(216, 138, 0, 0.065);
}
.certificate-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(216, 138, 0, 0.35);
  border-radius: 10px;
  pointer-events: none;
}
.certificate-card-inner {
  position: relative;
  z-index: 1;
}
.certificate-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.certificate-seal {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aietr-blue);
  color: var(--aietr-orange);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 44, 69, 0.12);
  font-size: 18px;
}
.certificate-brand {
  color: var(--aietr-blue);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.certificate-title {
  margin: 2px 0 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}
.certificate-recipient {
  text-align: center;
  margin: 18px 0 12px;
}
.certificate-recipient .eyebrow-lite {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.certificate-recipient strong {
  display: block;
  margin-top: 4px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
}
.certificate-recipient span {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 9.5px;
}
.certificate-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.certificate-detail {
  padding: 8px;
  border: 1px solid rgba(230, 225, 217, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}
.certificate-detail span {
  display: block;
  color: var(--muted);
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}
.certificate-detail strong {
  display: block;
  margin-top: 2px;
  color: var(--aietr-blue);
  font-size: 9.5px;
}
.certificate-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.signature-line {
  width: 125px;
  padding-top: 20px;
  border-top: 1px solid var(--border-dark);
  color: var(--muted);
  font-size: 8px;
  text-align: center;
}
.qr-placeholder {
  width: 54px;
  height: 54px;
  border: 5px solid #102653;
  background: repeating-linear-gradient(45deg, #102653 0 3px, #fff 3px 6px);
}

/* Issued certificate detail card */
.issued-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 175px;
  gap: 10px;
  align-items: stretch;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.issued-side {
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.issued-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  color: var(--success);
  font-size: 8px;
  font-weight: 800;
}
.issued-card h3 {
  margin: 0;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}
.issued-card p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 10px;
}
.issued-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 11px;
}
.issued-meta-item {
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-2);
}
.issued-meta-item span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.issued-meta-item strong {
  display: block;
  margin-top: 2px;
  color: var(--aietr-blue);
  font-size: 9.5px;
}

/* Center details */
.center-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, #faf8f3);
}
.center-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aietr-blue-soft);
  border: 1px solid var(--aietr-blue-border);
  color: var(--aietr-blue);
  font-size: 19px;
}
.center-card h3 {
  margin: 0;
  color: var(--aietr-blue);
  font-size: 13px;
}
.center-card p {
  margin: 3px 0 0;
  color: var(--text-soft);
  font-size: 9.5px;
  line-height: 1.6;
}
.center-code {
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

/* Filter / search toolbar */
.record-toolbar {
  display: grid;
  grid-template-columns: 1.1fr 0.75fr 0.75fr auto;
  gap: 7px;
  align-items: end;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  margin-bottom: 10px;
}
.record-toolbar .ui-field {
  gap: 4px;
}
.record-toolbar .ui-field label {
  font-size: 8.5px;
}

/* Compact chips */
.record-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  border: 1px solid;
}
.record-chip.blue {
  background: var(--aietr-blue-soft);
  border-color: var(--aietr-blue-border);
  color: var(--aietr-blue);
}
.record-chip.orange {
  background: var(--aietr-orange-soft);
  border-color: var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}
.record-chip.green {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success);
}
.record-chip.purple {
  background: var(--purple-soft);
  border-color: var(--purple-border);
  color: var(--purple);
}

@media (max-width: 1000px) {
  .portal-section-grid {
    grid-template-columns: 1fr;
  }
  .stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-shell.attractive {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .issued-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .stepper {
    grid-template-columns: 1fr;
  }
  .identity-card {
    grid-template-columns: 1fr;
  }
  .identity-photo {
    min-height: 155px;
  }
  .identity-grid {
    grid-template-columns: 1fr;
  }
  .certificate-details {
    grid-template-columns: 1fr 1fr;
  }
  .center-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .center-icon {
    width: 44px;
    height: 44px;
  }
  .center-code {
    grid-column: 2;
    justify-self: start;
  }
  .record-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .record-toolbar .toolbar-action {
    grid-column: 1/-1;
  }
  .dashboard-shell.attractive {
    grid-template-columns: 1fr;
  }
  .dashboard-sidebar.attractive {
    padding: 11px;
  }
  .dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-nav a {
    justify-content: center;
  }
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-user > div:first-child {
    display: none;
  }
}
@media (max-width: 480px) {
  .certificate-details {
    grid-template-columns: 1fr;
  }
  .record-toolbar {
    grid-template-columns: 1fr;
  }
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .portal-panel,
  .stepper-body {
    padding: 13px;
  }
  .identity-main {
    padding: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stepper-progress-bar {
    transition: none;
  }
}

/* =========================================================
   EXTENDED VISUAL SHOWCASE
   Events • testimonials • galleries • members • sponsors • heroes • sliders
   ========================================================= */

.event-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
  align-items: stretch;
}
.event-countdown-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--aietr-blue-border);
  border-radius: 16px;
  background: linear-gradient(135deg, #102c45 0%, #183a5b 58%, #244b6d 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(16, 44, 69, 0.12);
}
.event-countdown-card:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  right: -70px;
  top: -90px;
  border-radius: 50%;
  background: rgba(246, 165, 0, 0.15);
  pointer-events: none;
}
.event-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.event-countdown-card h3 {
  position: relative;
  margin: 10px 0 5px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
}
.event-countdown-card p {
  position: relative;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  line-height: 1.65;
  max-width: 650px;
}
.countdown-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 16px 0 14px;
}
.countdown-unit {
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  text-align: center;
}
.countdown-value {
  display: block;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  line-height: 1;
  color: #fff;
}
.countdown-label {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 7.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.event-meta-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.82);
}
.event-side-card {
  padding: 17px;
  background: linear-gradient(135deg, #fff9e9, #fff);
  border: 1px solid var(--aietr-orange-border);
  border-radius: 16px;
}
.event-side-card h4 {
  margin: 0 0 7px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}
.event-side-list {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}
.event-side-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 9px;
}
.event-side-item strong {
  color: var(--aietr-blue);
}
.event-side-item span {
  color: var(--text-soft);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.testimonial-card {
  position: relative;
  padding: 17px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  border-color: var(--aietr-orange-border);
  box-shadow: 0 9px 24px rgba(16, 44, 69, 0.075);
}
.testimonial-quote {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1;
  color: var(--aietr-orange);
  opacity: 0.55;
}
.testimonial-person {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.testimonial-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aietr-orange-soft);
  border: 1px solid var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
  font-size: 10px;
  font-weight: 900;
}
.testimonial-person strong {
  display: block;
  color: var(--aietr-blue);
  font-size: 11px;
}
.testimonial-person span {
  display: block;
  color: var(--muted);
  font-size: 8.5px;
  margin-top: 1px;
}
.testimonial-stars {
  display: flex;
  gap: 2px;
  color: #e3a200;
  font-size: 9px;
  margin-bottom: 8px;
}
.testimonial-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.75;
}
.testimonial-slider {
  position: relative;
  overflow: hidden;
}
.testimonial-track {
  display: flex;
  transition: transform 0.45s ease;
}
.testimonial-slide {
  min-width: 100%;
}
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 9px;
}
.testimonial-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: #d7dde2;
  cursor: pointer;
}
.testimonial-dot.active {
  background: var(--aietr-orange-dark);
  transform: scale(1.15);
}

.gallery-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: #102c45;
}
.gallery-track {
  display: flex;
  transition: transform 0.5s ease;
}
.gallery-slide {
  position: relative;
  min-width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
}
.gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 28px 20px 17px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: #fff;
}
.gallery-overlay strong {
  display: block;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
}
.gallery-overlay span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
}
.gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(16, 44, 69, 0.48);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(5px);
}
.gallery-arrow:hover {
  background: var(--aietr-orange);
  color: #102c45;
}
.gallery-arrow.prev {
  left: 10px;
}
.gallery-arrow.next {
  right: 10px;
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 7px;
}
.gallery-thumb {
  padding: 0;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gallery-thumb:hover img,
.gallery-thumb.active img {
  opacity: 1;
  transform: scale(1.04);
}
.gallery-thumb.active {
  border-color: var(--aietr-orange-dark);
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.member-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.member-cover {
  height: 78px;
  background: linear-gradient(135deg, #102c45, #315c7e);
  position: relative;
}
.member-cover:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.18));
}
.member-avatar {
  position: absolute;
  z-index: 1;
  top: 48px;
  left: 15px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 5px 15px rgba(16, 44, 69, 0.12);
  color: var(--aietr-orange-dark);
  font-size: 13px;
  font-weight: 900;
}
.member-info {
  padding: 31px 14px 14px;
}
.member-role {
  color: var(--aietr-orange-dark);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.member-name {
  margin: 3px 0 3px;
  color: var(--aietr-blue);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 400;
}
.member-org {
  margin: 0 0 9px;
  color: var(--text-soft);
  font-size: 9px;
  line-height: 1.55;
}
.member-links {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.member-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--aietr-blue);
  text-decoration: none;
  font-size: 8px;
  font-weight: 700;
}
.member-links a:hover {
  background: var(--aietr-orange-soft);
  border-color: var(--aietr-orange-border);
}
.member-card.compact {
  display: flex;
  padding: 13px;
  gap: 10px;
  align-items: center;
}
.member-card.compact .member-avatar {
  position: static;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  border: 1px solid var(--aietr-orange-border);
  box-shadow: none;
  flex: 0 0 47px;
}
.member-card.compact .member-info {
  padding: 0;
}
.member-card.compact .member-name {
  font-size: 15px;
}
.member-card.dark {
  background: linear-gradient(135deg, #102c45, #183a5b);
  border-color: #183a5b;
  color: #fff;
}
.member-card.dark .member-cover {
  background: linear-gradient(135deg, #183a5b, #315c7e);
}
.member-card.dark .member-avatar {
  background: #fff7e4;
  border-color: #fff;
}
.member-card.dark .member-role {
  color: #ffd06a;
}
.member-card.dark .member-name {
  color: #fff;
}
.member-card.dark .member-org {
  color: rgba(255, 255, 255, 0.68);
}
.member-card.dark .member-links a {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.member-card.horizontal {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: stretch;
}
.member-card.horizontal .member-cover {
  height: auto;
  min-height: 168px;
}
.member-card.horizontal .member-avatar {
  left: 20px;
  top: 57px;
}
.member-card.horizontal .member-info {
  padding: 19px 14px;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.sponsor-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 10px 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sponsor-tile:hover {
  transform: translateY(-2px);
  border-color: var(--aietr-orange-border);
  box-shadow: 0 8px 18px rgba(16, 44, 69, 0.06);
}
.sponsor-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--aietr-blue);
  font-size: 17px;
  margin-bottom: 6px;
}
.sponsor-tile strong {
  color: var(--aietr-blue);
  font-size: 9px;
  text-align: center;
}
.sponsor-tile span {
  color: var(--muted);
  font-size: 7.5px;
  text-align: center;
  margin-top: 2px;
}
.sponsor-tile.orange .sponsor-icon {
  background: var(--aietr-orange-soft);
  border-color: var(--aietr-orange-border);
  color: var(--aietr-orange-dark);
}
.sponsor-tile.blue .sponsor-icon {
  background: var(--aietr-blue-soft);
  border-color: var(--aietr-blue-border);
  color: var(--aietr-blue);
}
.sponsor-tile.green .sponsor-icon {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success);
}
.sponsor-tile.purple .sponsor-icon {
  background: var(--purple-soft);
  border-color: var(--purple-border);
  color: var(--purple);
}
.sponsor-tile.dark .sponsor-icon {
  background: #102c45;
  border-color: #183a5b;
  color: #f6a500;
}

.hero-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.showcase-hero {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 22px;
  display: flex;
  align-items: center;
}
.showcase-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 76%;
}
.showcase-hero h3 {
  margin: 0 0 6px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 400;
}
.showcase-hero p {
  margin: 0 0 12px;
  font-size: 10.5px;
  line-height: 1.65;
  max-width: 520px;
}
.showcase-hero .eyebrow {
  margin: 0 0 6px;
}
.hero-style-1 {
  background: linear-gradient(135deg, #fff8e6, #fff);
}
.hero-style-1:before {
  content: "";
  position: absolute;
  right: -45px;
  top: -35px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #ffd86c 0,
    #f6a500 48%,
    #d88a00 49%,
    transparent 50%
  );
  opacity: 0.35;
}
.hero-style-1 h3 {
  color: var(--aietr-blue);
}
.hero-style-1 p {
  color: var(--text-soft);
}
.hero-style-2 {
  background: #102c45;
  color: #fff;
}
.hero-style-2:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(246, 165, 0, 0.25), transparent 48%),
    linear-gradient(transparent 78%, rgba(0, 0, 0, 0.2));
}
.hero-style-2 h3 {
  color: #fff;
}
.hero-style-2 p {
  color: rgba(255, 255, 255, 0.72);
}
.hero-style-3 {
  background: linear-gradient(135deg, #edf4f9 0%, #ffffff 58%, #f5f1fc 100%);
}
.hero-style-3:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 46%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 0 11%,
    rgba(92, 42, 168, 0.11) 11% 100%
  );
  clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-style-3 h3 {
  color: var(--aietr-blue);
}
.hero-style-3 p {
  color: var(--text-soft);
}
.hero-style-4 {
  background: linear-gradient(110deg, #183a5b 0 55%, #f6a500 55% 100%);
  color: #fff;
}
.hero-style-4:after {
  content: "";
  position: absolute;
  right: -30px;
  top: 30px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 22px solid rgba(255, 255, 255, 0.17);
  box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.08);
}
.hero-style-4 h3 {
  color: #fff;
}
.hero-style-4 p {
  color: rgba(255, 255, 255, 0.76);
}
.hero-style-5 {
  background: radial-gradient(circle at 100% 0, #fff2c7, transparent 34%),
    linear-gradient(135deg, #fbf9f5, #fff);
}
.hero-style-5:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56%;
  height: 8px;
  background: linear-gradient(90deg, var(--aietr-orange), var(--aietr-blue));
  border-radius: 0 12px 0 0;
}
.hero-style-5 h3 {
  color: var(--aietr-blue);
}
.hero-style-5 p {
  color: var(--text-soft);
}
.hero-style-6 {
  background: linear-gradient(135deg, #5c2aa8, #183a5b);
  color: #fff;
}
.hero-style-6:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 16px
  );
}
.hero-style-6 h3 {
  color: #fff;
}
.hero-style-6 p {
  color: rgba(255, 255, 255, 0.73);
}

.layered-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.layered-slider {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fbf9f5;
  padding: 18px;
}
.layered-label {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 12px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--aietr-blue);
  font-size: 7.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.layered-stage {
  position: relative;
  height: 195px;
  margin-top: 17px;
}
.layer-card {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 72%;
  height: 164px;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
  transition: transform 0.42s ease, opacity 0.42s ease, filter 0.42s ease;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 12px 24px rgba(16, 44, 69, 0.11);
}
.layer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.layer-card .layer-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 22px 13px 12px;
  background: linear-gradient(transparent, rgba(16, 44, 69, 0.78));
  color: #fff;
}
.layer-copy strong {
  display: block;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
}
.layer-copy span {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: 7.5px;
  margin-top: 2px;
}
.layered-controls {
  position: absolute;
  z-index: 6;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.layered-controls button {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--aietr-blue);
  cursor: pointer;
}
.layered-controls button:hover {
  background: var(--aietr-orange);
  border-color: var(--aietr-orange);
  color: #102c45;
}
.layered-slider.design-2 {
  background: #102c45;
}
.layered-slider.design-2 .layered-label {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.17);
}
.layered-slider.design-2 .layer-card {
  width: 70%;
  height: 158px;
  border-color: rgba(255, 255, 255, 0.15);
}
.layered-slider.design-3 {
  background: linear-gradient(135deg, #edf4f9, #fff);
}
.layered-slider.design-3 .layer-card {
  height: 154px;
  width: 69%;
  top: 15px;
  border-radius: 6px;
  box-shadow: 0 14px 28px rgba(16, 44, 69, 0.12);
}
.layered-slider.design-4 {
  background: linear-gradient(135deg, #fff7e4, #f5f1fc);
}
.layered-slider.design-4 .layer-card {
  height: 158px;
  width: 67%;
  border-radius: 22px;
}
.layered-slider.design-4 .layer-card:nth-child(2) {
  border-radius: 8px;
}

/* layer-card stack states */
.layered-slider .layer-card.pos-0 {
  z-index: 4;
  opacity: 1;
  --rot: 0deg;
}
.layered-slider .layer-card.pos-1 {
  z-index: 3;
  opacity: 0.92;
  --rot: -4deg;
}
.layered-slider .layer-card.pos-2 {
  z-index: 2;
  opacity: 0.68;
  --rot: 4deg;
}
.layered-slider .layer-card.pos-3 {
  z-index: 1;
  opacity: 0.4;
  --rot: 0deg;
}

@media (max-width: 1100px) {
  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sponsor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  .hero-showcase-grid,
  .layered-grid,
  .event-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
  .member-grid {
    grid-template-columns: 1fr;
  }
  .sponsor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .showcase-hero {
    min-height: 210px;
    padding: 18px;
  }
  .showcase-hero .hero-content {
    max-width: 94%;
  }
  .showcase-hero h3 {
    font-size: 23px;
  }
  .layered-grid {
    grid-template-columns: 1fr;
  }
  .layered-slider {
    min-height: 245px;
  }
  .layer-card {
    width: 78%;
  }
}
@media (max-width: 430px) {
  .gallery-overlay strong {
    font-size: 16px;
  }
  .gallery-arrow {
    width: 30px;
    height: 30px;
  }
  .member-card.horizontal {
    grid-template-columns: 1fr;
  }
  .member-card.horizontal .member-cover {
    min-height: 105px;
  }
  .member-card.horizontal .member-avatar {
    top: 57px;
  }
  .event-countdown-card h3 {
    font-size: 23px;
  }
  .sponsor-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sponsor-tile {
    min-height: 84px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track,
  .testimonial-track,
  .layer-card {
    transition: none;
  }
  .testimonial-card,
  .member-card,
  .sponsor-tile {
    transition: none;
  }
  .announcement-marquee .marquee-track {
    animation: none !important;
  }
}