/* Accent colours for the certificate verification page, from this journal's
   own palette. The text colour on the accent is picked for WCAG AA contrast. */
.pkp_page_verify {
    --cert-accent: #6b2d82;
    --cert-accent-dark: #4e2064;
    --cert-on-accent: #ffffff;
    --cert-tint: #f7f0fa;
    --cert-stripe: #faf6fc;
    --cert-line: #e6d9ec;
}

/* ==========================================================================
   Nexora: certificate verification page (<journal>/verify)
   Added 2026-09-28. Keep this block if this stylesheet is ever re-uploaded
   from a local copy, or the /verify page loses its design.

   Everything is scoped to body.pkp_page_verify, the class OJS derives from the
   page's path, so no other page on the journal is affected. The journal's
   accent colours are declared in the small block immediately above this one.

   The styling keys off the page's structure (h3 + table), never off classes in
   the content, so tables the journal manager adds later are styled the same
   way without them having to do anything. !important appears only on the table
   cells, to override the inline font and colour attributes that come along
   when rows are pasted in from a spreadsheet.
   ========================================================================== */

.pkp_page_verify .page {
    max-width: 62rem;
}

/* --- Title ---------------------------------------------------------------- */

.pkp_page_verify .page > h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.pkp_page_verify .page > h2::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: 0.8rem;
    border-radius: 2px;
    background: var(--cert-accent);
}

.pkp_page_verify .page > h2 + p {
    margin: 1.25rem 0 2rem;
    font-size: 1.08rem;
    line-height: 1.65;
    color: #3f3f46;
}

/* --- Section headings ----------------------------------------------------- */

.pkp_page_verify .page h3 {
    margin: 2.5rem 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cert-line);
    color: var(--cert-accent-dark);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- The "how to check a certificate" steps ------------------------------- */

.pkp_page_verify .page ol {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.25rem 1.1rem 2.9rem;
    border-left: 4px solid var(--cert-accent);
    border-radius: 0 6px 6px 0;
    background: var(--cert-tint);
}

.pkp_page_verify .page ol li {
    margin: 0.4rem 0;
    line-height: 1.6;
}

/* The paragraph that follows the steps is the "what counts as genuine" note. */
.pkp_page_verify .page ol + p {
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--cert-line);
    border-radius: 6px;
    background: #fff;
    font-size: 0.97rem;
    line-height: 1.6;
}

/* --- The certificate tables ----------------------------------------------- */

.pkp_page_verify .page table {
    width: 100% !important;
    margin: 0 0 1rem;
    border: 1px solid var(--cert-line) !important;
    border-collapse: collapse !important;
    background: #fff;
    font-size: 0.95rem;
}

/* Neutralise whatever formatting arrives with rows pasted from a spreadsheet. */
.pkp_page_verify .page table th,
.pkp_page_verify .page table td {
    width: auto !important;
    height: auto !important;
    padding: 0.65rem 0.9rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cert-line) !important;
    background-color: transparent !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-align: left !important;
    vertical-align: top !important;
}

.pkp_page_verify .page table thead th {
    background-color: var(--cert-accent) !important;
    color: var(--cert-on-accent) !important;
    border-bottom: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.pkp_page_verify .page table tbody tr:nth-child(even) td {
    background-color: var(--cert-stripe) !important;
}

.pkp_page_verify .page table tbody tr:hover td {
    background-color: var(--cert-tint) !important;
}

.pkp_page_verify .page table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.pkp_page_verify .page table tbody td:first-child {
    font-weight: 500;
}

/* Certificate IDs are compared character by character, so give them a
   monospace face. This assumes the documented column order:
   Name, Certificate ID, Date Issued. */
.pkp_page_verify .page table tbody td:nth-child(2) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pkp_page_verify .page table tbody td:last-child {
    color: #52525b !important;
    white-space: nowrap;
}

/* --- Last updated --------------------------------------------------------- */

.pkp_page_verify .page > p:last-child {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cert-line);
    color: #6b7280;
    font-size: 0.875rem;
}

/* --- Wide screens --------------------------------------------------------- */

@media (min-width: 641px) {
    /* Lists can run to hundreds of rows, so keep the column labels in view
       while scrolling. Ignored where an ancestor clips overflow. */
    .pkp_page_verify .page table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* --- Phones (most holders arrive here from a QR code) --------------------- */

@media (max-width: 640px) {
    .pkp_page_verify .page > h2 {
        font-size: 1.6rem;
    }

    .pkp_page_verify .page > h2 + p {
        font-size: 1rem;
    }

    /* Let a wide table scroll sideways rather than squeezing the columns. */
    .pkp_page_verify .page table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pkp_page_verify .page table th,
    .pkp_page_verify .page table td {
        padding: 0.55rem 0.7rem !important;
    }
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

.pkp_structure_head { display: none; }



h1.page_title {
    display: none !important;
}

/* Force the page title to display ONLY on the article page */
.page_article h1.page_title {
  display: block !important;
}

.homepage_about h2 {
    display: none !important;
}


/* =========================================
   RSCSL Custom Side Block Styles
   ========================================= */


.rscsl-cover-wrapper {
  margin-bottom: 20px;
}

.rscsl-cover-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* Adds a slight border and shadow to make the book cover pop against the dark background */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.rscsl-issue-meta {
  /* Monospace font to match the design */
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #E0D5E5; 
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
}

.pkp_structure_page, .page {
    max-width: 100% !important;
    width: 100% !important;
    
}

.pkp_structure_content {
	padding-top: 0;
}

/* =========================================
   RSCSL Footer Styles
   ========================================= */
.pkp_structure_main {
  padding-bottom: 0;
} 

.pkp_brand_footer {

    display: none;
}
.pkp_footer_content {
	padding: 0;
	
}


.pkp_page_index .additional_content {
  border-top: none;
}

/* 1. Force the outer OJS footer wrapper to match our dark background and stretch to the edges */
.pkp_structure_footer_wrapper {
    background-color: #1a1a1a !important; 
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. Remove the max-width constraints on the inner OJS footer container */
.pkp_structure_footer {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================
   RSCSL Full-Width Footer Styles (3-Column Layout)
   ========================================= */

.rscsl-footer-wrapper-full {
  background-color: #1e1924; /* Deep, dark purple/grey from the theme */
  color: #cccccc;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 60px 30px 30px;
  
  /* Forces the block to span the full viewport width */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.rscsl-footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Top Accent Line (replaces gold with theme purple) */
.rscsl-footer-accent {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #6b2d82 0%, #b579c9 50%, #6b2d82 100%);
  margin-bottom: 50px;
  border-radius: 2px;
}

/* 3-Column Grid Layout */
.rscsl-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-bottom: 50px;
}

.rscsl-footer-col {
  display: flex;
  flex-direction: column;
}

/* Serif Headings to match the image's style */
.rscsl-footer-heading-large {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 19px;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 24px 0;
  letter-spacing: 0.02em;
}

/* Small uppercase labels for the Contact column */
.rscsl-footer-label {
  font-size: 11.5px;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}

.rscsl-footer-info-block {
  margin-bottom: 24px;
}

/* Base Text styling */
.rscsl-footer-text {
  font-size: 14px;
  color: #a39cae;
  line-height: 1.75;
  margin: 0 0 16px 0;
}

.rscsl-footer-text:last-child {
  margin-bottom: 0;
}

.rscsl-footer-text strong {
  color: #dcc3e6;
  font-weight: 600;
}

/* Links with distinct underline (adapted to purple theme) */
.rscsl-footer-link {
  color: #dcc3e6;
  text-decoration: none;
  border-bottom: 1px solid #8a3fa0;
  padding-bottom: 2px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.rscsl-footer-link:hover {
  color: #ffffff;
  border-bottom-color: #dcc3e6;
}

/* Centered Bottom Bar */
.rscsl-footer-bottom {
  border-top: 1px solid #332d3b;
  padding-top: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rscsl-pkp-text {
  font-size: 11px;
  color: #928b9c;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.rscsl-footer-divider {
  color: #4a4456;
  margin: 0 12px;
  font-weight: normal;
}

/* Responsive Design Adjustments */
@media (max-width: 960px) {
  .rscsl-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  /* Makes the Copyright block span across both columns on medium screens */
  .rscsl-footer-grid .rscsl-footer-col:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .rscsl-footer-wrapper-full {
    padding: 50px 20px 30px;
  }
  .rscsl-footer-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .rscsl-footer-grid .rscsl-footer-col:nth-child(3) {
    grid-column: auto;
  }
}

/* [removed] Old duplicate 'Side Menu Block Styles (With Icons)' block —
   every selector in it was redeclared later in the Sidebar section. */


/* Icon Sizing */
.rscsl-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0; /* Prevents the icon from squishing on small screens */
}
/* =========================================================
   RSCSL — Custom CSS
   Paste this whole file into:
   Website Settings → Appearance → Custom CSS
   ========================================================= */

/* ---------- Navbar ---------- */

.rscsl-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF !important;
  padding: 14px 40px !important;
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #221033, #6B2D82 45%, #A868BC 80%, #DCC3E6) 1;
  border-bottom: 1px solid #E3DFEA !important;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 2px rgba(46,18,64,0.05);
}

.rscsl-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  transition: opacity .18s ease;
}

.rscsl-brand:hover { opacity: 0.85; }

.rscsl-logo-img {
  max-height: 50px;
  width: auto;
  display: block;
}

.rscsl-logo-text {
  font-family: 'Fraunces', Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 600;
  color: #2E1240;
}

.rscsl-subtext {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #8A8296;
  line-height: 1.3;
  max-width: 150px;
}

.rscsl-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.rscsl-link {
  color: #4A4456 !important;
  text-decoration: none !important;
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 1px;
  position: relative;
  transition: color .18s ease;
  white-space: nowrap;
}

.rscsl-link::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #6B2D82;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.rscsl-link:hover { color: #3E1A52 !important; }
.rscsl-link:hover::before { transform: scaleX(1); }

.rscsl-dropdown { position: relative; display: inline-block; }

.rscsl-dropdown-content {
  display: block;
  position: absolute;
  background-color: #FFFFFF;
  min-width: 200px;
  box-shadow: 0 14px 32px rgba(46,18,64,0.14);
  z-index: 999;
  top: 100%;
  left: 0;
  margin-top: 10px;
  border: 1px solid #E3DFEA;
  border-radius: 10px;
  overflow: hidden;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.rscsl-dropdown-content a {
  color: #4A4456 !important;
  padding: 11px 14px;
  text-decoration: none !important;
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: none;
  border-radius: 6px;
  transition: background .16s ease, color .16s ease, padding-left .16s ease;
}

.rscsl-dropdown-content a:hover {
  background-color: #F7F0FA;
  color: #3E1A52 !important;
  padding-left: 18px;
}

.rscsl-dropdown:hover .rscsl-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rscsl-right-section { display: flex; align-items: center; gap: 14px; }

.rscsl-search-container {
  display: flex;
  align-items: center;
  border-bottom: 1.5px solid #D3CCDE;
  padding-bottom: 5px;
  transition: border-color .18s ease;
}

.rscsl-search-container:focus-within { border-color: #6B2D82; }

.rscsl-search-input {
  border: none;
  outline: none;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  width: 200px;
  color: #221D2B;
  background: transparent;
}

.rscsl-search-input::placeholder { color: #8A8296; }

.rscsl-search-icon {
  color: #8A8296;
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  transition: color .18s ease;
}

.rscsl-search-icon:hover { color: #6B2D82; }

.rscsl-btn-submit {
  background-color: #FFFFFF !important;
  color: #3E1A52 !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px !important;
  border: 1.5px solid #D3CCDE !important;
  transition: all .18s ease;
  display: inline-block;
}

.rscsl-btn-submit:hover {
  background-color: #F7F0FA !important;
  border-color: #6B2D82 !important;
  transform: translateY(-1px);
}

.rscsl-btn-submit:active { transform: translateY(0); }

/* Register button (2nd button in the right section) gets the solid brand fill */
.rscsl-right-section .rscsl-btn-submit:last-child {
  background: linear-gradient(135deg, #4E2064, #6B2D82) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(46,18,64,0.12);
}

.rscsl-right-section .rscsl-btn-submit:last-child:hover {
  background: linear-gradient(135deg, #3E1A52, #4E2064) !important;
  box-shadow: 0 6px 20px rgba(46,18,64,0.18);
  transform: translateY(-1px);
}

@media (max-width: 1080px) {
  .rscsl-nav-links { display: none; }
}


/* ---------- Sidebar ---------- */

.rscsl-side-menu-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rscsl-side-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 13px 18px !important;
  border-radius: 10px !important;
  transition: all .18s ease;
  text-align: center;
}

.rscsl-side-btn-primary {
  background: linear-gradient(135deg, #4E2064, #6B2D82) !important;
  color: #FFFFFF !important;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(46,18,64,0.22);
  position: relative;
  overflow: hidden;
}

.rscsl-side-btn-primary:hover {
  background: linear-gradient(135deg, #3E1A52, #4E2064) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(46,18,64,0.3);
}

.rscsl-side-btn-primary:active { transform: translateY(0); }

.rscsl-side-btn-outline {
  background: #FFFFFF !important;
  color: #4A4456 !important;
  border: 1.5px solid #E3DFEA !important;
  justify-content: flex-start;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.rscsl-side-btn-outline:hover {
  border-color: #6B2D82 !important;
  color: #3E1A52 !important;
  background: #F7F0FA !important;
  padding-left: 22px !important;
}

.rscsl-side-btn-outline:active { background: #EFE2F4 !important; }

.rscsl-subscribe-card {
  background: #FAF8FC;
  border: 1px solid #E3DFEA;
  border-radius: 14px;
  padding: 20px;
  margin-top: 6px;
}

.rscsl-subscribe-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16.5px;
  font-weight: 600;
  color: #2E1240;
  margin: 0 0 14px;
}

.rscsl-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rscsl-subscribe-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid #D3CCDE;
  background: #FFFFFF;
  font-size: 13.5px;
  font-family: 'Inter', sans-serif;
  color: #221D2B;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.rscsl-subscribe-input::placeholder { color: #8A8296; }

.rscsl-subscribe-input:focus {
  outline: none;
  border-color: #6B2D82;
  box-shadow: 0 0 0 3px #EFE2F4;
}

.rscsl-subscribe-btn {
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 8px;
  background: #3E1A52;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.rscsl-subscribe-btn:hover {
  background: #4E2064;
  transform: translateY(-1px);
}

.rscsl-subscribe-btn:active { transform: translateY(0); }

.rscsl-side-btn:focus-visible,
.rscsl-subscribe-input:focus-visible,
.rscsl-subscribe-btn:focus-visible {
  outline: 2.5px solid #6B2D82;
  outline-offset: 2px;
}

/* =========================================================
   RSCSL — Homepage additions (Hero + Aims & Scope hover states)
   Append this to the end of your existing Custom CSS.
   ========================================================= */

/* ---------- Homepage: Hero buttons ----------
   Base look is set by the inline style="" on each <a> (in case this
   stylesheet doesn't apply); these rules only add the hover motion. */

.rscsl-hero-btn-primary:hover {
  background-color: #F7F0FA !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.rscsl-hero-btn-outline:hover {
  background-color: rgba(255,255,255,0.12) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px);
}

.rscsl-hero-btn-primary,
.rscsl-hero-btn-outline {
  transition: all .18s ease;
}

/* ---------- Homepage: Aims & Scope ---------- */

.rscsl-scope-link {
  transition: color .18s ease;
}

.rscsl-scope-link:hover {
  color: #3E1A52 !important;
  text-decoration: underline !important;
}

.rscsl-scope-item {
  transition: background .18s ease, padding-left .18s ease;
}

.rscsl-scope-item:hover {
  background-color: #F7F0FA;
  padding-left: 20px !important;
}

/* ---------- Homepage: Aims & Scope v2 (card grid) ---------- */

.rscsl-scope-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rscsl-scope-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(46,18,64,0.12);
  border-color: #DCC3E6 !important;
}

/* ---------- Homepage: Frequency v2 (stat chips) ---------- */

.rscsl-freq-chip {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rscsl-freq-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(46,18,64,0.1);
  border-color: #DCC3E6 !important;
}

/* =========================================================
   RSCSL — About page additions (fact chips + tag pills)
   Append this to the end of your existing Custom CSS.
   ========================================================= */

.rscsl-fact-chip {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rscsl-fact-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(46,18,64,0.1);
  border-color: #DCC3E6 !important;
}

.rscsl-tag-pill {
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  cursor: default;
}

.rscsl-tag-pill:hover {
  background: #4E2064 !important;
  border-color: #4E2064 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   RSCSL — Aims & Scope page styles
   Upload this file via: Website Settings → Appearance → Custom CSS (upload)
   Do NOT paste this into the page's HTML source editor — HTMLPurifier will
   strip <style> tags there. This file is loaded outside the purifier.
   ========================================================================== */

/* [removed] duplicate @import — identical to the one on line 1. */

/* ---- Design tokens, scoped to this page only so nothing leaks into the
   rest of the OJS theme ---------------------------------------------------- */
.rscsl-page {
  --ink: #1c1620;
  --violet-900: #2c1638;
  --violet-800: #4e2064;
  --violet-700: #6b2d82;
  --violet-600: #8a3fa0;
  --violet-500: #a559bc;
  --violet-400: #b579c9;
  --lilac-100: #efe2f4;
  --lilac-50: #f8f4fa;
  --mist-300: #d3ccde;
  --mist-200: #e3dfea;
  --mist-100: #f2f0f6;
  --stone-700: #4a4456;
  --stone-500: #6b6476;
  --paper: #ffffff;

  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Public Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;

  background:
    radial-gradient(1100px 420px at 88% -8%, var(--lilac-100) 0%, transparent 62%),
    var(--mist-100);
  padding: 80px 30px;
  font-family: var(--font-body);
  color: var(--stone-700);
}

.rscsl-container {
  max-width: 900px;
  margin: 0 auto;
}

/* ---- Overline ------------------------------------------------------------ */
.rscsl-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--violet-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.rscsl-overline::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--violet-600);
  display: inline-block;
}

/* ---- Headings & intro ----------------------------------------------------- */
h1.rscsl-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 46px;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 28px 0;
}

p.rscsl-intro {
  font-size: 17px;
  line-height: 1.75;
  color: var(--stone-700);
  max-width: 760px;
  margin: 0 0 20px 0;
}

.rscsl-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, var(--mist-300) 0%, transparent 75%);
  margin: 14px 0 44px 0;
}
.rscsl-divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-600);
}

h2.rscsl-scope-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  margin: 0 0 18px 0;
}

p.rscsl-scope-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--stone-500);
  max-width: 760px;
  margin: 0 0 34px 0;
}

/* ---- Scope cards grid ------------------------------------------------------
   Same grid geometry as the original: responsive auto-fit, 380px minimum. */
.rscsl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

.rscsl-card {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--mist-200);
  border-radius: 14px;
  padding: 26px 24px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* top accent bar sweeps in on hover */
.rscsl-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet-700), var(--violet-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.rscsl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -14px rgba(76, 32, 100, 0.32);
  border-color: var(--violet-400);
}
.rscsl-card:hover::before {
  transform: scaleX(1);
}

/* Accent mark. Was a 48px tile holding an icon element; OJS strips the empty
   inner tag, so this is now a self-contained bar that needs no child node. */
.rscsl-icon-badge {
  flex-shrink: 0;
  width: 6px;
  align-self: stretch;
  min-height: 44px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--violet-700), var(--violet-400));
  transition: transform 0.25s ease, background 0.25s ease;
}
.rscsl-card:hover .rscsl-icon-badge {
  transform: scaleY(1.04);
  background: linear-gradient(180deg, var(--violet-600), var(--violet-500));
}

   violet on hover, like a stamp landing */
.rscsl-card-index {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--mist-300);
  transition: color 0.25s ease, transform 0.25s ease;
}
.rscsl-card:hover .rscsl-card-index {
  color: var(--violet-600);
  transform: translateY(-1px);
}

.rscsl-card-body { padding-top: 2px; padding-right: 28px; }

h3.rscsl-card-title {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px 0;
}

p.rscsl-card-desc {
  color: var(--stone-700);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---- Closing callout ------------------------------------------------------ */
.rscsl-callout {
  position: relative;
  background: linear-gradient(135deg, var(--lilac-100) 0%, var(--paper) 130%);
  border-left: 4px solid var(--violet-700);
  padding: 26px 28px;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 10px 26px -18px rgba(76, 32, 100, 0.4);
}
.rscsl-callout p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--violet-900);
  margin: 0;
}

/* ---- Reusable buttons ------------------------------------------------------
   Not used on this page (the original had none, so the layout stays as-is),
   but ready for CTAs elsewhere on the site — e.g. "Submit an Article" on
   the Submissions page — styled to match this palette. */
.rscsl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rscsl-btn-primary {
  background: var(--violet-700);
  color: #ffffff;
  box-shadow: 0 6px 16px -6px rgba(76, 32, 100, 0.55);
}
.rscsl-btn-primary:hover {
  background: var(--violet-600);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(76, 32, 100, 0.6);
}
.rscsl-btn-primary:active { transform: translateY(0); box-shadow: 0 4px 10px -4px rgba(76, 32, 100, 0.5); }
.rscsl-btn-primary:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }

.rscsl-btn-outline {
  background: transparent;
  color: var(--violet-700);
  border-color: var(--mist-300);
}
.rscsl-btn-outline:hover { border-color: var(--violet-600); color: var(--violet-600); background: var(--lilac-50); }
.rscsl-btn-outline:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }

/* ---- Accessibility & responsiveness --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rscsl-card, .rscsl-icon-badge, .rscsl-card-index, .rscsl-btn { transition: none; }
}

@media (max-width: 640px) {
  .rscsl-page { padding: 56px 20px; }
  h1.rscsl-title { font-size: 32px; }
  h2.rscsl-scope-title { font-size: 26px; }
  .rscsl-grid { grid-template-columns: 1fr; }
  .rscsl-card-body { padding-right: 0; }
  .rscsl-card-index { position: static; display: block; margin-bottom: 8px; }
}

/* ==========================================================================
   RSCSL — Writing Rules page
   APPEND this block to the END of your existing rscsl-custom.css.
   No new @import needed — this page reuses the fonts and the design tokens
   already declared on .rscsl-page in the Aims & Scope block.
   ========================================================================== */


/* ---- Wider shell for this page (matches the original 1000px) -------------- */
.rscsl-container-wide { max-width: 1000px; }

/* ---- Page header ---------------------------------------------------------- */
.rscsl-page-head {
  border-bottom: 1px solid var(--mist-300);
  padding-bottom: 22px;
  margin-bottom: 36px;
}
.rscsl-page-head h1.rscsl-title { margin-bottom: 0; }

/* ---- Compliance requirement rows ------------------------------------------
   These are conditions to satisfy, not a sequence, so they get check marks
   rather than numbers. */
.rscsl-rules {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 60px;
  counter-reset: none;
}

.rscsl-rule {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--mist-200);
  border-left: 3px solid var(--violet-700);
  border-radius: 0 10px 10px 0;
  padding: 18px 24px;
  transition: transform 0.22s ease, border-left-color 0.22s ease,
              box-shadow 0.22s ease, background 0.22s ease;
}
.rscsl-rule:hover {
  transform: translateX(4px);
  border-left-color: var(--violet-500);
  background: var(--lilac-50);
  box-shadow: 0 10px 22px -16px rgba(76, 32, 100, 0.5);
}

.rscsl-rule-mark {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--violet-400);
  box-shadow: 0 0 0 4px var(--lilac-100);
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.rscsl-rule:hover .rscsl-rule-mark {
  background: var(--violet-700);
  box-shadow: 0 0 0 4px var(--lilac-100);
  transform: scale(1.15);
}

p.rscsl-rule-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--stone-700);
}

/* ---- Manuscript section cards ---------------------------------------------
   These ARE a sequence — the order sections appear in a published article —
   so the § marks carry real information. */
.rscsl-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 25px;
  margin-bottom: 32px;
  align-items: stretch;
}

.rscsl-stack {
  display: flex;
  flex-direction: column;
  gap: 25px;
  height: 100%;
}
.rscsl-stack > .rscsl-sec { flex: 1; }

.rscsl-sec {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--mist-200);
  border-radius: 12px;
  padding: 28px 30px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.rscsl-sec::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet-700), var(--violet-400));
  transform: scaleX(0.14);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.rscsl-sec:hover {
  transform: translateY(-4px);
  border-color: var(--violet-400);
  box-shadow: 0 16px 32px -14px rgba(76, 32, 100, 0.3);
}
.rscsl-sec:hover::before { transform: scaleX(1); }

.rscsl-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-right: 46px;
}

.rscsl-sec-icon {
  flex-shrink: 0;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--violet-400);
  transition: width 0.25s ease, background 0.25s ease;
}
.rscsl-sec:hover .rscsl-sec-icon {
  width: 34px;
  background: var(--violet-700);
}

h3.rscsl-sec-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}

/* section mark, borrowed from legal citation — encodes reading order */
.rscsl-sec-num {
  position: absolute;
  top: 24px;
  right: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--mist-300);
  transition: color 0.25s ease, transform 0.25s ease;
}
.rscsl-sec:hover .rscsl-sec-num {
  color: var(--violet-600);
  transform: translateY(-1px);
}

/* ---- Type inside the cards ------------------------------------------------ */
.rscsl-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-700);
  margin: 0 0 8px 0;
}
.rscsl-sub-gap { margin-top: 20px; }

p.rscsl-sec-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--stone-700);
  margin: 0 0 12px 0;
}
p.rscsl-sec-text:last-child { margin-bottom: 0; }

ul.rscsl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.rscsl-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--stone-700);
}
ul.rscsl-list li:last-child { margin-bottom: 0; }
ul.rscsl-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--violet-500);
  border-radius: 2px;
  transform: rotate(45deg);
}
ul.rscsl-list-tight li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.7; }
ul.rscsl-list strong { color: var(--ink); font-weight: 600; }
ul.rscsl-list em, p.rscsl-sec-text em { color: var(--violet-800); font-style: italic; }

/* inline notes — the ethics / doctrinal caveats */
.rscsl-note {
  border-left: 2px solid var(--violet-400);
  background: var(--lilac-50);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--violet-900);
}
.rscsl-note + .rscsl-note { margin-top: 10px; }

/* ---- References card (full width) ----------------------------------------- */
.rscsl-sec-wide {
  height: auto;
  padding: 34px 36px;
  margin-bottom: 44px;
}
.rscsl-sec-wide h3.rscsl-sec-title { font-size: 17px; }
.rscsl-sec-wide p.rscsl-sec-text { font-size: 16px; }
.rscsl-sec-wide p.rscsl-sec-text strong { color: var(--ink); }

/* the APA link becomes a real button with hover / active / focus states */
.rscsl-page a.rscsl-btn { text-decoration: none; margin-top: 6px; }
.rscsl-page a.rscsl-btn::after { content: " \2197"; transition: transform 0.2s ease; }

/* ---- Closing statement ----------------------------------------------------- */
.rscsl-callout-quiet p {
  font-style: italic;
  font-size: 15.5px;
}

/* ---- Accessibility & responsiveness ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rscsl-rule, .rscsl-rule-mark, .rscsl-sec, .rscsl-sec::before,
  .rscsl-sec-icon, .rscsl-sec-num {
    transition: none;
  }
}

@media (max-width: 640px) {
  .rscsl-sections { grid-template-columns: 1fr; }
  .rscsl-sec { padding: 24px 20px; }
  .rscsl-sec-wide { padding: 26px 20px; }
  .rscsl-sec-head { padding-right: 0; }
  .rscsl-sec-num { position: static; display: block; margin-bottom: 10px; }
  .rscsl-rule { padding: 16px 18px; }
  .rscsl-rules { margin-bottom: 44px; }
}
/* ==========================================================================
   RSCSL — Manuscript Templates page
   Reuses .rscsl-sec / .rscsl-list / .rscsl-note / .rscsl-btn from above.
   Only the genuinely new pieces are declared here.
   ========================================================================== */

/* Cards in this grid pin their button to the bottom, so two cards of
   different length still line their buttons up. */
.rscsl-sec-fill {
  display: flex;
  flex-direction: column;
}
.rscsl-sec-grow { flex: 1 1 auto; }

/* "File 1 of 2" is wider than "§ 1", so the heading needs more clearance */
.rscsl-sec-head-clear { padding-right: 104px; }

.rscsl-btn-block {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 22px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}

/* ---- Mandatory-submission banner ------------------------------------------
   The one dark surface on the page — it carries the only instruction an
   author can get wrong, so it is the one element allowed to shout. */
.rscsl-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--violet-900) 0%, var(--violet-800) 100%);
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 18px 40px -22px rgba(46, 18, 64, 0.75);
}
.rscsl-banner::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--violet-400), var(--violet-600));
}

.rscsl-overline-light {
  color: var(--violet-400);
  margin-bottom: 12px;
}
.rscsl-overline-light::before { background: var(--violet-400); }

h3.rscsl-banner-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 14px 0;
}

p.rscsl-banner-text {
  font-size: 16px;
  line-height: 1.7;
  color: #ede6f2;
  margin: 0 0 12px 0;
}
p.rscsl-banner-text strong { color: #ffffff; font-weight: 600; }

p.rscsl-banner-sub {
  font-size: 14.5px;
  line-height: 1.65;
  color: #bda8c9;
  margin: 0;
}

@media (max-width: 640px) {
  .rscsl-banner { padding: 26px 22px; }
  h3.rscsl-banner-title { font-size: 21px; }
  .rscsl-sec-head-clear { padding-right: 0; }
}

/* ==========================================================================
   RSCSL — Submissions page
   Reuses .rscsl-sec / .rscsl-rules / .rscsl-list / .rscsl-btn from above.
   ========================================================================== */
 
.rscsl-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
 
/* Title + description inside a .rscsl-rule row */
strong.rscsl-rule-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 5px 0;
  letter-spacing: 0.01em;
}
.rscsl-rule-body { min-width: 0; }
.rscsl-rule-body p.rscsl-rule-text { font-size: 15px; }
 
/* Checkbox variant of the row marker — an author ticks these off, so the
   marker is a box rather than the plain dot used elsewhere. */
.rscsl-rule-mark-box {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border-radius: 4px;
  border: 2px solid var(--violet-400);
  background: transparent;
  box-shadow: none;
  position: relative;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.rscsl-rule-mark-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.rscsl-rule:hover .rscsl-rule-mark-box {
  background: var(--violet-700);
  border-color: var(--violet-700);
  box-shadow: none;
  transform: none;
}
.rscsl-rule:hover .rscsl-rule-mark-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
 
@media (prefers-reduced-motion: reduce) {
  .rscsl-rule-mark-box, .rscsl-rule-mark-box::after { transition: none; }
}

/* ==========================================================================
   RSCSL — Editorial Policies page
   Reuses .rscsl-sec / .rscsl-banner / .rscsl-title from above.
   ========================================================================== */
 
.rscsl-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 50px;
}
 
.rscsl-policy-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--mist-200);
  border-radius: 12px;
  padding: 20px 22px;
  text-decoration: none !important;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease,
              box-shadow 0.22s ease, background 0.22s ease;
}
/* left accent grows from a stub, echoing the card hover elsewhere on the site */
.rscsl-policy-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--violet-700), var(--violet-400));
  transform: scaleY(0.22);
  transition: transform 0.28s ease;
}
.rscsl-policy-card:hover {
  transform: translateY(-3px);
  border-color: var(--violet-400);
  background: var(--lilac-50);
  box-shadow: 0 14px 28px -16px rgba(76, 32, 100, 0.4);
}
.rscsl-policy-card:hover::before { transform: scaleY(1); }
.rscsl-policy-card:active { transform: translateY(0); }
.rscsl-policy-card:focus-visible {
  outline: 2.5px solid var(--violet-600);
  outline-offset: 2px;
}
 
.rscsl-policy-title {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.22s ease;
}
.rscsl-policy-card:hover .rscsl-policy-title { color: var(--violet-800); }
 
.rscsl-policy-arrow {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--mist-300);
  transition: color 0.22s ease, transform 0.22s ease;
}
.rscsl-policy-card:hover .rscsl-policy-arrow {
  color: var(--violet-600);
  transform: translateX(4px);
}
 
@media (prefers-reduced-motion: reduce) {
  .rscsl-policy-card, .rscsl-policy-card::before,
  .rscsl-policy-title, .rscsl-policy-arrow { transition: none; }
}

/* ==========================================================================
   RSCSL — Editorial Team page
   Reuses .rscsl-sec / .rscsl-sec-fill / .rscsl-sub / .rscsl-btn from above.
   ========================================================================== */
 
h3.rscsl-person-name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px 0;
}
 
/* Affiliation lines — set tighter than body copy so a five-line address
   still reads as one block rather than five paragraphs. */
p.rscsl-person-meta {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--stone-700);
  margin: 0 0 3px 0;
}
p.rscsl-person-meta-quiet {
  color: var(--stone-500);
  font-size: 13.5px;
}
 
.rscsl-page a.rscsl-person-email {
  display: inline-block;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--violet-700);
  text-decoration: none;
  border-bottom: 1px solid var(--mist-300);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.rscsl-page a.rscsl-person-email:hover {
  color: var(--violet-600);
  border-color: var(--violet-600);
}
.rscsl-page a.rscsl-person-email:focus-visible {
  outline: 2px solid var(--violet-400);
  outline-offset: 2px;
}

/* ==========================================================================
   RSCSL — Notifications Page specific tweaks
   ========================================================================== */
.rscsl-banner .rscsl-btn-row {
  margin-top: 24px;
}
.rscsl-banner .rscsl-btn-primary {
  /* Elevates the button contrast slightly against the dark purple banner */
  background: #ffffff;
  color: var(--violet-800);
  border: 1px solid #ffffff;
}
.rscsl-banner .rscsl-btn-primary:hover {
  background: var(--lilac-50);
  color: var(--violet-900);
  border-color: var(--lilac-50);
}