/* ============================================================
   VATICAN OBSERVATORY - user.css
   ============================================================ */

@font-face {
  font-family: 'EB Garamond';
  src: url('/files/Fonts/eb-garamond-v32-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/files/Fonts/eb-garamond-v32-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --cassiopeia-font-family-body: "EB Garamond", serif;
  --cassiopeia-font-family-headings: "EB Garamond", serif;
  --cassiopeia-font-weight-headings: 400;
  --cassiopeia-font-weight-normal: 400;
  --vo-gold-1:     #FFE799;
  --vo-gold-2:     #FFDB66;
  --vo-gold-3:     #FFCF33;
  --vo-gold:       #C9A84C;
  --vo-gold-light: #DFC070;
  --vo-gold-pale:  #F0E4B8;
  --vo-travertine: #FAF8F4;
  --vo-ink:        #111111;
  --vo-muted:      #888888;
  --vo-border:     #E0DDD8;
  --cassiopeia-color-primary: #111111;
  --cassiopeia-color-hover:   #C9A84C;
  --link-color:               #C9A84C;
  --link-hover-color:         #DFC070;
  --body-bg:                  #FAF8F4;
  --body-color:               #111111;
}

html, body { background-color: var(--vo-travertine) !important; color: var(--vo-ink); }
body { font-family: "EB Garamond", serif; font-size: 1.1rem; line-height: 1.7; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: "EB Garamond", serif; font-weight: 400;
  letter-spacing: 0.05em; color: var(--vo-ink); text-transform: uppercase;
}
a { color: var(--vo-gold); text-decoration: none; }
a:hover { color: var(--vo-gold-light); text-decoration: none; }

/* -- HEADER ----------------------------------------------- */
header.container-header {
  background: var(--vo-travertine) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  position: relative !important;
  z-index: 1000;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}
header.container-header > .grid-child.container-below-top { display: none !important; }

/* -- TOPBAR ----------------------------------------------- */
header.container-header .container-topbar {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.4rem 2rem !important;
  background: var(--vo-travertine) !important;
  color: var(--vo-ink) !important;
}
header.container-header .container-topbar .mod-languages { display: flex !important; align-items: center !important; }
header.container-header .container-topbar ul { display: flex !important; flex-direction: row !important; gap: 0.4rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
header.container-header .container-topbar ul li { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
header.container-header .container-topbar ul li a { display: flex !important; align-items: center !important; padding: 0 0.2rem !important; border-bottom: 2px solid transparent !important; opacity: 0.7 !important; transition: opacity 0.2s !important; }
header.container-header .container-topbar ul li a:hover { opacity: 1 !important; }
header.container-header .container-topbar ul li.active a,
header.container-header .container-topbar ul li a[aria-current] { opacity: 1 !important; border-bottom: 2px solid var(--vo-gold) !important; padding-bottom: 0 !important; }
header.container-header .container-topbar ul li img { height: 14px !important; width: auto !important; display: block !important; }
header.container-header .container-topbar p { display: none !important; }

/* -- LOGO ROW --------------------------------------------- */
header.container-header > .grid-child:not(.container-below-top):not(.container-nav):not(.container-topbar) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
  height: 200px !important; padding: 16px 2rem 8px !important;
  background: var(--vo-travertine) !important; border: none !important;
  position: static !important; transform: none !important;
}
body.vo-mercury-active header.container-header > .grid-child:not(.container-below-top):not(.container-nav):not(.container-topbar) { background-color: var(--vo-gold-pale) !important; }
header.container-header .navbar-brand,
header.container-header .navbar-brand a { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; padding: 0 !important; height: auto !important; max-height: none !important; }
header.container-header .navbar-brand img,
header.container-header .navbar-brand > img,
header.container-header .navbar-brand a img { height: 175px !important; width: auto !important; max-width: none !important; max-height: none !important; display: block !important; margin: 0 auto !important; }
header.container-header .site-description { display: none !important; }

/* -- NAV ROW ---------------------------------------------- */
header.container-header > .grid-child.container-nav {
  display: flex !important; flex-direction: row !important; align-items: stretch !important;
  justify-content: space-between !important; width: 100% !important; max-width: 100% !important;
  height: 52px !important; margin: 0 !important; padding: 0 !important;
  background: var(--vo-travertine) !important; border: none !important;
  position: relative !important; z-index: 200 !important;
}
body.vo-mercury-active header.container-header > .grid-child.container-nav { background-color: var(--vo-gold-pale) !important; }

header.container-header .mod-menu > li::after { display: none !important; }
header.container-header .mod-menu {
  display: flex !important; flex-direction: row !important; align-items: stretch !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important; width: auto !important;
}
header.container-header .container-nav .mod-menu:first-of-type { justify-content: flex-start !important; }
header.container-header .container-nav .mod-menu:last-of-type { margin-left: auto !important; justify-content: flex-end !important; }
header.container-header .mod-menu > li {
  display: flex !important; align-items: center !important;
  padding: 0 !important; margin: 0 !important; position: relative !important;
}

header.container-header .mod-menu > li > a {
  display: flex !important; align-items: center !important; height: 52px !important;
  padding: 0 1.4rem !important; color: var(--vo-ink) !important; background: transparent !important;
  font-size: 0.82rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important;
  font-family: "EB Garamond", serif !important; white-space: nowrap !important;
  text-decoration: none !important; border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
header.container-header .mod-menu > li > a:hover,
header.container-header .mod-menu > li.active > a { color: var(--vo-gold) !important; border-bottom-color: var(--vo-gold) !important; }

/* -- DROPDOWN ARROW on parent items ----------------------- */
header.container-header .mod-menu .mm-toggler,
header.container-header .mod-menu .mm-toggler-link,
header.container-header .mod-menu button.mm-collapsed { display: none !important; }

header.container-header .mod-menu > li.parent > a,
header.container-header .mod-menu > li.deeper > a {
  cursor: default !important;
}
header.container-header .mod-menu > li.parent > a::after,
header.container-header .mod-menu > li.deeper > a::after {
  display: none !important;
}

/* -- SUBMENU PANEL - standard layout (inner pages) -------- */
header.container-header .mod-menu > li.parent > ul,
header.container-header .mod-menu > li.deeper > ul {
  display: none !important;
  position: absolute !important;
  top: 52px !important;
  left: 0 !important;
  min-width: 220px !important;
  margin: 0 !important;
  padding: 0.4rem 0 !important;
  background: var(--vo-travertine) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
  list-style: none !important;
  z-index: 9999 !important;
  flex-direction: column !important;
}
header.container-header .mod-menu > li.parent:hover > ul,
header.container-header .mod-menu > li.deeper:hover > ul {
  display: block !important;
}

/* -- SUBMENU PANEL - MetisMenu layout (home page) --------- */
@media (min-width: 992px) {
  header.container-header .mod-menu > li.parent > ul.mm-collapse,
  header.container-header .mod-menu > li.deeper > ul.mm-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    min-width: 220px !important;
    margin: 0 !important;
    padding: 0.4rem 0 !important;
    background: var(--vo-travertine) !important;
    border: 1px solid var(--vo-border) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
    list-style: none !important;
    z-index: 9999 !important;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }
  header.container-header .mod-menu > li.parent:hover > ul.mm-collapse,
  header.container-header .mod-menu > li.deeper:hover > ul.mm-collapse {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}

header.container-header .mod-menu > li.parent > ul > li,
header.container-header .mod-menu > li.deeper > ul > li {
  display: block !important; margin: 0 !important; padding: 0 !important;
}
header.container-header .mod-menu > li.parent > ul > li > a,
header.container-header .mod-menu > li.deeper > ul > li > a {
  display: block !important; height: auto !important; padding: 0.6rem 1.4rem !important;
  color: var(--vo-ink) !important; font-size: 0.82rem !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important; font-family: "EB Garamond", serif !important;
  text-decoration: none !important; border-bottom: none !important; white-space: nowrap !important;
}
header.container-header .mod-menu > li.parent > ul > li > a:hover,
header.container-header .mod-menu > li.deeper > ul > li > a:hover {
  background: var(--vo-gold-pale) !important; color: var(--vo-gold) !important;
}

/* -- RIGHT MENU: colored buttons -------------------------- */
header.container-header .container-nav .mod-menu:last-of-type > li { align-items: stretch !important; }
header.container-header .container-nav .mod-menu:last-of-type > li > a { border-bottom: none !important; color: #111111 !important; padding: 0 1.6rem !important; height: 52px !important; }
header.container-header .container-nav .mod-menu:last-of-type > li > a:hover { border-bottom: none !important; color: #111111 !important; filter: brightness(0.93) !important; }
header.container-header .container-nav .mod-menu:last-of-type > li:nth-child(1) > a { background-color: #FFF3CC !important; }
header.container-header .container-nav .mod-menu:last-of-type > li:nth-child(2) > a { background-color: #FFE799 !important; }
header.container-header .container-nav .mod-menu:last-of-type > li:nth-child(3) > a { background-color: #FFDB66 !important; }

/* -- HERO BANNER MODULE (site homepage banner) -- */
.container-banner { margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
.container-banner .moduletable, .container-banner .mod-custom { margin: 0 !important; padding: 0 !important; }
.container-banner img { width: 100% !important; height: 68vh !important; min-height: 420px !important; max-height: 700px !important; object-fit: cover !important; display: block !important; }
.container-banner .banner-overlay { height: 68vh !important; min-height: 420px !important; max-height: 700px !important; background-attachment: fixed !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; display: flex !important; align-items: flex-end !important; }
.container-banner .banner-overlay .overlay { width: 100%; padding: 3rem 5%; background: linear-gradient(to top, rgba(17,17,17,0.72) 0%, rgba(17,17,17,0.15) 55%, transparent 100%); display: flex; flex-direction: column; align-items: flex-start; }
.container-banner .banner-overlay .overlay h1 { color: #fff !important; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3.2rem); text-shadow: 0 2px 16px rgba(0,0,0,0.5); max-width: 700px; }
@media (max-width: 991px) { .container-banner .banner-overlay { background-attachment: scroll !important; height: 55vh !important; } }
@media (prefers-reduced-motion: reduce) { .container-banner .banner-overlay { background-attachment: scroll !important; } }

/* -- CONTENT ------------------------------------------------ */
.site-grid, .container-component, .container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b { background-color: var(--vo-travertine) !important; }
.container-component { padding: 3rem 0 !important; }

/* -- NEWS GRID ------------------------------------------------ */
ul.mod-articles-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; grid-auto-rows: 420px !important; gap: 3px !important; max-width: 1600px !important; width: calc(100% - 2rem) !important; margin: 3rem auto !important; padding: 0 !important; list-style: none !important; background: transparent !important; }
ul.mod-articles-grid > li { position: relative !important; overflow: hidden !important; background: var(--vo-ink) !important; height: 420px !important; margin: 0 !important; padding: 0 !important; display: block !important; }
ul.mod-articles-grid > li > article { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li > article > div { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li dl { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li figure { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: block !important; }
ul.mod-articles-grid > li figure img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: brightness(0.72) !important; transition: transform 0.5s ease, filter 0.4s ease !important; }
ul.mod-articles-grid > li:hover figure img { transform: scale(1.06) !important; filter: brightness(0.45) !important; }
ul.mod-articles-grid > li h4.mod-articles-title { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; margin: 0 !important; padding: 3rem 1.1rem 1rem !important; background: linear-gradient(transparent, rgba(17,17,17,0.92)) !important; color: #fff !important; font-size: 0.92rem !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; line-height: 1.35 !important; z-index: 5 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
ul.mod-articles-grid > li h4.mod-articles-title a { color: #fff !important; text-decoration: none !important; }
ul.mod-articles-grid > li:hover h4.mod-articles-title a { color: var(--vo-gold-1) !important; }
ul.mod-articles-grid > li .mod-articles-item-info, ul.mod-articles-grid > li time, ul.mod-articles-grid > li .mod-articles-readmore, ul.mod-articles-grid > li dd, ul.mod-articles-grid > li dt { display: none !important; }
@media (max-width: 1024px) { ul.mod-articles-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 360px !important; } ul.mod-articles-grid > li { height: 360px !important; } }
@media (max-width: 540px) { ul.mod-articles-grid { grid-template-columns: 1fr !important; grid-auto-rows: 300px !important; } ul.mod-articles-grid > li { height: 300px !important; } }

/* -- BUTTONS ------------------------------------------------ */
.btn-primary { background-color: var(--vo-gold) !important; border-color: var(--vo-gold) !important; color: #111 !important; border-radius: 0 !important; font-size: 0.85rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 0.6rem 1.8rem !important; }
.btn-primary:hover { background-color: var(--vo-gold-light) !important; border-color: var(--vo-gold-light) !important; color: #111 !important; }

/* -- BREADCRUMBS ------------------------------------------ */
.breadcrumb { background: transparent !important; font-size: 0.85rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 0.8rem 0 !important; }
.breadcrumb-item a { color: var(--vo-muted) !important; }
.breadcrumb-item a:hover { color: var(--vo-gold) !important; }
.breadcrumb-item.active { color: var(--vo-gold) !important; }
.breadcrumb-item + .breadcrumb-item::before { content: "–" !important; color: var(--vo-border) !important; }

/* -- PAGINATION ------------------------------------------- */
.page-link { background: transparent !important; border: 1px solid var(--vo-border) !important; color: var(--vo-ink) !important; border-radius: 0 !important; }
.page-link:hover { background: var(--vo-gold-pale) !important; color: var(--vo-gold) !important; }
.page-item.active .page-link { background: var(--vo-gold) !important; border-color: var(--vo-gold) !important; color: #111 !important; }

/* -- FOOTER ----------------------------------------------- */
.footer { background: var(--vo-ink) !important; background-image: none !important; color: rgba(255,255,255,0.7) !important; border-top: 2px solid var(--vo-gold) !important; margin-top: 0 !important; }
.footer .grid-child { padding: 3rem 2rem 2rem !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; gap: 2rem !important; }
.footer a:not(.btn), .footer .btn-link { color: rgba(255,255,255,0.6) !important; font-size: 0.9rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }
.footer a:not(.btn):hover { color: var(--vo-gold) !important; }
.footer .mod-footer { font-size: 0.8rem !important; color: rgba(255,255,255,0.35) !important; text-align: center !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 1.5rem !important; width: 100% !important; }

/* -- FORMS ------------------------------------------------ */
.form-control { background: var(--vo-travertine) !important; border: 1px solid var(--vo-border) !important; border-radius: 0 !important; color: var(--vo-ink) !important; }
.form-control:focus { border-color: var(--vo-gold) !important; box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important; }

/* -- MOBILE ------------------------------------------------ */
@media (max-width: 991px) {
  header.container-header > .grid-child:not(.container-below-top):not(.container-nav):not(.container-topbar) { height: 100px !important; padding: 8px 1rem !important; }
  header.container-header .navbar-brand img, header.container-header .navbar-brand a img { height: 80px !important; }
  header.container-header > .grid-child.container-nav { height: auto !important; flex-direction: column !important; }
  header.container-header .mod-menu { flex-direction: column !important; width: 100% !important; }
  header.container-header .container-nav .mod-menu:last-of-type { margin-left: 0 !important; }
  header.container-header .container-nav .mod-menu:last-of-type > li > a { width: 100% !important; padding: 0.75rem 1.2rem !important; height: auto !important; }
  header.container-header .mod-menu > li > a { height: auto !important; padding: 0.75rem 1.2rem !important; }
  header.container-header .container-topbar { padding: 0.3rem 1rem !important; }
  header.container-header .mod-menu > li.parent > ul.mm-collapse,
  header.container-header .mod-menu > li.deeper > ul.mm-collapse {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 1rem !important;
  }
  header.container-header .mod-menu > li.parent > ul,
  header.container-header .mod-menu > li.deeper > ul { position: static !important; box-shadow: none !important; border: none !important; padding-left: 1rem !important; }
  header.container-header .mod-menu .mm-toggler,
  header.container-header .mod-menu .mm-toggler-link,
  header.container-header .mod-menu button.mm-collapsed { display: inline-flex !important; }
}
@media (max-width: 575px) { .footer .grid-child { flex-direction: column !important; padding: 2rem 1rem !important; } }

/* ============================================================
   STAFF PAGES (profile + directory grid)
   Restored from the previous user.css — this block went missing
   when user.css was regenerated, which is why the astronomer
   profile pages and the "all astronomers" directory grid broke.
   Nothing here is Jupiter-specific; Jupiter's own layout still
   lives inline inside default.php as noted at the bottom.
   ============================================================ */
.vo-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: "EB Garamond", serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--vo-gold) !important;
  text-decoration: none !important;
  border: 1px solid var(--vo-gold) !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: 999px !important;
  transition: background 0.2s, color 0.2s !important;
}
.vo-back-btn:hover {
  background: var(--vo-gold) !important;
  color: #111111 !important;
  text-decoration: none !important;
}
/* -- STAFF PROFILE (Earth / Classic + Mercury / Minimal) --- */
.vo-staff-profile { --vo-accent: var(--vo-gold); background: #ffffff; font-family: "EB Garamond", serif; }
html body .vo-staff-profile.vo-layout--classic {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}
.vo-staff-cover { width: 100% !important; height: 280px !important; overflow: hidden !important; margin-bottom: 0 !important; position: relative !important; }
.vo-staff-cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.vo-staff-banner-text { position: absolute !important; bottom: 2rem !important; left: 3rem !important; color: #fff !important; font-size: clamp(1.4rem, 3vw, 2.2rem) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-shadow: 0 2px 12px rgba(0,0,0,0.6) !important; }
.vo-staff-nav { width: 100% !important; background: var(--vo-gold-pale) !important; margin: 0 !important; padding: 0 !important; display: block !important; }
.vo-staff-nav ul, .vo-staff-nav ul.mod-menu, .vo-staff-nav ul.mod-menu.mod-list, .vo-staff-nav ul.mod-menu.mod-list.nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; padding-inline-start: 0 !important; }
.vo-staff-nav ul li, .vo-staff-nav ul.mod-menu li { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.vo-staff-nav ul li a, .vo-staff-nav ul.mod-menu li a { display: flex !important; align-items: center !important; padding: 0.8rem 1.6rem !important; font-size: 0.82rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--vo-menu-text-color, var(--vo-ink)) !important; text-decoration: none !important; white-space: nowrap !important; border-bottom: none !important; }
.vo-staff-nav ul li a:hover, .vo-staff-nav ul li.active a { color: var(--vo-accent) !important; }
.vo-staff-nav h3 { display: none !important; }
.vo-staff-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 2.5rem !important; padding: 3rem 4rem 0 4rem !important; max-width: 1100px !important; margin: 0 auto !important; background: #ffffff !important; }
.vo-staff-header-main { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 2.5rem !important; flex-basis: 100% !important; }
.vo-staff-photo img { width: 260px !important; height: 310px !important; object-fit: cover !important; object-position: top !important; display: block !important; flex-shrink: 0 !important; }
.vo-staff-info { flex: 1 !important; min-width: 0 !important; padding-top: 0.5rem !important; }
.vo-staff-name { font-size: 1.8rem !important; letter-spacing: 0.08em !important; margin-bottom: 0.4rem !important; text-transform: uppercase !important; }
.vo-staff-position { color: var(--vo-accent) !important; font-size: 1rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; margin-bottom: 1rem !important; }
.vo-staff-research { font-size: 0.95rem !important; color: var(--vo-muted) !important; margin-bottom: 1.2rem !important; }
.vo-staff-label { font-weight: 600 !important; color: var(--vo-ink) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 0.8rem !important; }
.vo-staff-links { display: flex !important; gap: 1rem !important; flex-wrap: wrap !important; }
.vo-staff-link { font-size: 0.8rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 0.35rem 1rem !important; border: 1px solid var(--vo-button-color, var(--vo-accent)) !important; color: var(--vo-button-color, var(--vo-accent)) !important; text-decoration: none !important; transition: background 0.2s, color 0.2s !important; }
.vo-staff-link:hover { background: var(--vo-button-color, var(--vo-accent)) !important; color: #111 !important; }
.vo-links--filled .vo-staff-link { background: var(--vo-button-color, var(--vo-accent)) !important; color: #111 !important; border-color: var(--vo-button-color, var(--vo-accent)) !important; }
.vo-links--filled .vo-staff-link:hover { filter: brightness(1.1) !important; }
.vo-links--text .vo-staff-link { border: none !important; padding: 0 !important; color: var(--vo-button-color, var(--vo-accent)) !important; text-decoration: underline !important; }
.vo-links--text .vo-staff-link:hover { background: transparent !important; color: var(--vo-ink) !important; }
.vo-staff-body { max-width: 1100px !important; margin: 0 auto !important; padding: 2rem 4rem 4rem !important; background: #ffffff !important; color: var(--vo-text-color, var(--vo-ink)) !important; }
.vo-staff-name { color: var(--vo-text-color, var(--vo-ink)) !important; }
.vo-text--large .vo-staff-body { font-size: 1.2rem !important; line-height: 1.85 !important; }
.vo-divider--line .vo-staff-body { border-top: 2px solid var(--vo-accent) !important; margin-top: 1.5rem !important; }
.vo-divider--dots .vo-staff-body::before { content: '· · · · ·' !important; display: block !important; text-align: center !important; color: var(--vo-accent) !important; letter-spacing: 0.5em !important; font-size: 1.2rem !important; padding: 1rem 0 !important; }
.vo-shape--circle .vo-staff-photo img { width: 240px !important; height: 240px !important; border-radius: 50% !important; object-position: top !important; }
.vo-shape--square .vo-staff-photo img { width: 260px !important; height: 260px !important; border-radius: 0 !important; }
.vo-btn--square .vo-staff-link { border-radius: 0 !important; }
.vo-btn--rounded .vo-staff-link { border-radius: 6px !important; }
.vo-header--right .vo-staff-header { flex-direction: row-reverse !important; }
.vo-header--center .vo-staff-header { flex-direction: column !important; align-items: center !important; text-align: center !important; }
.vo-header--center .vo-staff-links { justify-content: center !important; }
html body .vo-staff-profile.vo-layout--minimal .vo-staff-nav { background-color: var(--vo-gold-pale) !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; }
html body .vo-staff-profile.vo-layout--minimal .vo-staff-nav ul.mod-menu.mod-list.nav { max-width: 1700px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 5rem !important; padding-right: 5rem !important; box-sizing: border-box !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-cover { display: none !important; }
html body .vo-staff-profile.vo-layout--minimal .vo-staff-header { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background-color: var(--vo-gold-pale) !important; flex-direction: row !important; align-items: center !important; text-align: left !important; padding: 1.5rem 5rem 2.5rem !important; gap: 3rem !important; box-sizing: border-box !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-header-main { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 2rem !important; flex: 1 !important; max-width: 1600px !important; margin: 0 auto !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-photo img { width: 200px !important; height: 200px !important; border-radius: 50% !important; border: none !important; margin-bottom: 0 !important; flex-shrink: 0 !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-info { text-align: left !important; flex: 1 !important; display: grid !important; grid-template-columns: 1fr 420px !important; align-items: start !important; gap: 0 2rem !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-left-col { display: flex !important; flex-direction: column !important; gap: 0.4rem !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-name { font-size: 1.5rem !important; text-transform: none !important; letter-spacing: 0.02em !important; margin: 0 !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-right-col { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 1rem !important; text-align: right !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-position { text-align: right !important; font-size: 1rem !important; font-weight: 400 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: var(--vo-ink) !important; line-height: 1.4 !important; width: 100% !important; margin: 0 !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-research { font-size: 0.85rem !important; text-align: right !important; width: 100% !important; margin: 0 !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-tagline { font-size: 0.95rem !important; color: var(--vo-ink) !important; margin: 0 !important; max-width: 100% !important; text-align: left !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-links { grid-column: 1 / -1 !important; justify-content: flex-start !important; margin-top: 0.3rem !important; margin-bottom: 0 !important; gap: 0.8rem !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-link { border: none !important; padding: 0 !important; font-size: 1rem !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--vo-button-color, var(--vo-gold)) !important; }
.vo-staff-profile.vo-layout--minimal .vo-staff-link:hover { background: transparent !important; color: var(--vo-gold-light) !important; }
html body .vo-staff-profile.vo-layout--minimal > .vo-staff-body { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background-color: #ffffff !important; padding-top: 0.3rem !important; padding-bottom: 4rem !important; padding-left: 5rem !important; padding-right: 5rem !important; font-size: 1.05rem !important; box-sizing: border-box !important; display: block !important; }
html body .vo-staff-profile.vo-layout--minimal > .vo-staff-body p,
html body .vo-staff-profile.vo-layout--minimal > .vo-staff-body ul,
html body .vo-staff-profile.vo-layout--minimal > .vo-staff-body ol,
html body .vo-staff-profile.vo-layout--minimal > .vo-staff-body h1,
html body .vo-staff-profile.vo-layout--minimal > .vo-staff-body h2,
html body .vo-staff-profile.vo-layout--minimal > .vo-staff-body h3 { max-width: 1600px !important; margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 768px) {
  .vo-staff-header { flex-direction: column !important; padding: 2rem 1.5rem 0 !important; }
  .vo-staff-body { padding: 1.5rem 1.5rem 3rem !important; }
  .vo-staff-photo img { width: 160px !important; height: 190px !important; }
  .vo-staff-cover { height: 180px !important; }
}

/* -- STAFF LISTING GRID (directory page) -------------------- */
.vo-staff-listing { max-width: 1400px; margin: 0 auto; padding: 0 2rem 4rem; font-family: "EB Garamond", serif; }
.vo-staff-listing-title { font-size: 2.2rem; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.vo-staff-listing-intro { max-width: 900px; font-size: 1.05rem; line-height: 1.7; margin-bottom: 2.5rem; }
.vo-staff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.vo-staff-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--vo-border); }
.vo-staff-card-photo { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--vo-gold-pale); }
.vo-staff-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vo-staff-card-photo-placeholder { width: 100%; height: 100%; background: var(--vo-gold-pale); }
.vo-staff-card-body { flex: 1; display: flex; flex-direction: column; padding: 1.3rem 1.4rem 1.5rem; }
.vo-staff-card-name { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: none; margin: 0 0 0.4rem; color: var(--vo-ink); }
.vo-staff-card-role { flex: 1; font-size: 0.9rem; color: var(--vo-muted); letter-spacing: 0.02em; margin: 0 0 1.2rem; line-height: 1.45; }
.vo-staff-card-link { display: inline-block; text-align: center; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.65rem 1rem; border: 1px solid var(--vo-gold); color: var(--vo-gold); text-decoration: none; transition: background 0.2s, color 0.2s; }
.vo-staff-card-link:hover { background: var(--vo-gold); color: #111; }
@media (max-width: 600px) {
  .vo-staff-listing { padding: 0 1.2rem 3rem; }
  .vo-staff-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}

/* ============================================================
   DOSSIER LAYOUT
   ============================================================ */
@media (min-width: 900px) {
  .vo-staff-profile.vo-layout--dossier {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    align-items: start !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-cover {
    grid-column: 1 / -1 !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-nav {
    grid-column: 1 / -1 !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-header {
    grid-column: 1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 320px !important;
    padding: 3rem 2rem !important;
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    border-right: 1px solid var(--vo-border) !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-header-main {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-photo img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-links {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-link {
    width: 100% !important;
    text-align: left !important;
  }
  .vo-staff-profile.vo-layout--dossier .vo-staff-body {
    grid-column: 2 !important;
    max-width: none !important;
    padding: 3rem 4rem !important;
    margin: 0 !important;
  }
}
@media (max-width: 899px) {
  .vo-staff-profile.vo-layout--dossier .vo-staff-header { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 0; }
}

/* ============================================================
   ULTRA MINIMAL / SINGULARITY LAYOUT
   Widened content block + main/sidebar ratio, and increased the
   gap between the body text and the right-hand nav so the menu
   sits further right instead of hugging the copy.
   ============================================================ */
.vo-staff-profile.vo-layout--ultra_minimal {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem 4rem !important;
  display: grid !important;
  grid-template-columns: 3fr 0.85fr !important;
  gap: 4rem !important;
  background: #ffffff !important;
}
.vo-singularity-main {
  min-width: 0 !important;
}
.vo-singularity-header {
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}
.vo-staff-profile.vo-layout--ultra_minimal .vo-staff-photo img {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto 1rem !important;
  display: block !important;
  border: 1px solid var(--vo-border) !important;
}
.vo-singularity-name {
  font-size: 1.85rem !important;
  font-weight: 600 !important;
  color: var(--vo-text-color, var(--vo-ink)) !important;
  margin: 0 0 0.3rem !important;
}
.vo-singularity-position {
  font-size: 1.05rem !important;
  color: var(--vo-muted) !important;
  margin: 0 0 0.4rem !important;
}
.vo-singularity-keywords {
  font-size: 0.9rem !important;
  color: var(--vo-muted) !important;
  font-style: italic !important;
}
.vo-singularity-divider {
  border: 0 !important;
  height: 1px !important;
  background: var(--vo-border) !important;
  margin: 0 0 2rem !important;
}
.vo-singularity-main .vo-staff-body h2,
.vo-singularity-main .vo-staff-body h3 {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: var(--vo-text-color, var(--vo-ink)) !important;
  border-bottom: 1px solid var(--vo-border) !important;
  padding-bottom: 0.4rem !important;
  margin: 0 0 1rem !important;
}
.vo-singularity-main .vo-staff-body p,
.vo-singularity-main .vo-staff-body ul {
  font-size: 1rem !important;
  color: var(--vo-text-color, var(--vo-ink)) !important;
  margin: 0 0 1.5rem !important;
}
.vo-singularity-main .vo-staff-body a {
  color: var(--vo-button-color, var(--vo-accent, var(--vo-gold))) !important;
  text-decoration: none !important;
}
.vo-singularity-main .vo-staff-body a:hover {
  text-decoration: underline !important;
}
.vo-singularity-sidebar {
  border-left: 1px solid var(--vo-border) !important;
  padding-left: 1.75rem !important;
}
.vo-singularity-sidebar .vo-staff-nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.vo-singularity-sidebar .vo-staff-nav ul,
.vo-singularity-sidebar .vo-staff-nav ul.mod-menu,
.vo-singularity-sidebar .vo-staff-nav ul.mod-menu.mod-list,
.vo-singularity-sidebar .vo-staff-nav ul.mod-menu.mod-list.nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}
.vo-singularity-sidebar .vo-staff-nav ul li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0.5rem 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.vo-singularity-sidebar .vo-staff-nav ul li a {
  padding: 0.2rem 0 !important;
  font-size: 0.95rem !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--vo-muted) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.vo-singularity-sidebar .vo-staff-nav ul li a:hover,
.vo-singularity-sidebar .vo-staff-nav ul li.active a {
  background: transparent !important;
  color: var(--vo-accent, var(--vo-gold)) !important;
  text-decoration: none !important;
}
@media (max-width: 768px) {
  .vo-staff-profile.vo-layout--ultra_minimal {
    grid-template-columns: 1fr !important;
  }
  .vo-singularity-sidebar {
    border-left: none !important;
    border-top: 1px solid var(--vo-border) !important;
    padding-left: 0 !important;
    padding-top: 1.5rem !important;
  }
}

/* ============================================================
   JUPITER LAYOUT: intentionally NOT defined here.
   Jupiter's layout lives inline inside default.php
   (html/com_content/article/default.php). Its colors come
   from the :root variables defined above in this file.
   ============================================================ */