.container-header {
  background: linear-gradient(to right, #015219, #3cc063);
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.container-header .grid-child {
  padding-top: 0;
  padding-bottom: 0;
}

.container-footer {background: linear-gradient(to right, #015219, #3cc063);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.container-footer .grid-child {
  padding-top: 0;
  padding-bottom: 0;
} 

.navbar-brand,
.container-header .grid-child .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.navbar-brand img,
a[href="/"] img,
img[alt="Project ARKHAIA"] {
  max-width: 850px;
  max-height: 70px;   /* drop from 85 if you want it shorter */
  width: auto;        /* swap from 100% — let the image size itself */
  height: auto;
  display: block;
}

.container-header ul.mod-menu.nav-pills > li.metismenu-item > a,
.container-header ul.mod-menu.nav-pills > li.metismenu-item > button.mod-menu__heading {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  line-height: 1.2;
}

/* The ul itself often has default browser/Bootstrap margin */
.container-header ul.mod-menu.nav-pills {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* The module wrapper around the menu */
.container-header .mod-menu-wrapper,
.container-header .moduletable {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.container-header ul.mod-menu.nav-pills > li.metismenu-item.parent {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.container-header ul.mod-menu.nav-pills > li.metismenu-item.parent > .mm-toggler-link {
  flex: 0 0 auto;
  vertical-align: middle;
  align-self: center;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;        /* up from 300 — better legibility at small sizes */
  font-size: 1.25rem !important;         /* respects browser font preferences; ~16px at default */
  line-height: 2;        /* unitless — scales with font-size */
  color: #333;
  background-color: #fff;
}

.com-content-article__body a:not([class]) {
  color: #1a7e36;
}


ul li, ol li {
  line-height: 2.75;        /* 300% is 3× line height — unusually tall, reined in here */
  font-size: 1.25em;       /* list item text — larger than body */
}

ul li::marker, ol li::marker {
  font-size: 0.5em;        /* marker is relative to the li font-size */
}

h5 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #4a5a7a;
  border: 1px solid #4a5a7a;
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 3px;
  letter-spacing: 0.03em;
  margin-bottom: 0.5em;
}

h6 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #6a7a9a;
  border: 1px solid #6a7a9a;
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  letter-spacing: 0.02em;
  margin-bottom: 0.4em;
}

.heading-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25em;
  margin-bottom: 1em;
}

/* ----------------------------------------------------------
   1. SHARED STRUCTURE
   Targets ALL old classes + the new bottom classes
   ---------------------------------------------------------- */
.green-button, .smgreen-button, .red-button, .blue-button, 
.yellow-button, .magenta-button, .purple-button, .smpurple-button, 
.medpurple-button, .orange-button, .medorange-button, .grey-button, 
.red-outline-button,
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.1em;
  padding: 0.22em 0.85em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 20px;
  border: 2px solid;
  background: transparent;
  margin: 2px;
  cursor: pointer;

  transition: background-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}

/* Global Active Animation */
.green-button:active, .red-button:active, .blue-button:active, 
.bottomnext:active, .bottomchoice:active, .bottomred:active {
  transform: scale(0.95);
}

/* ----------------------------------------------------------
   2. SHARED COLORS (Grouping old classes with bottom classes)
   ---------------------------------------------------------- */

/* GREEN */
.green-button, .smgreen-button, .bottomnext {
  border-color: #1a7e36;
  color: #1a7e36 !important;
}
.green-button:hover, .smgreen-button:hover, .bottomnext:hover {
  background-color: #1a7e36;
  color: #fff !important;
}

/* RED */
.red-button, .bottomred {
  border-color: #a63228;
  color: #a63228 !important;
}
.red-button:hover, .bottomred:hover {
  background-color: #a63228;
  color: #fff !important;
}

/* BLUE */
.blue-button, .bottomblue {
  border-color: #2a4d8c;
  color: #2a4d8c !important;
}
.blue-button:hover, .bottomblue:hover {
  background-color: #2a4d8c;
  color: #fff !important;
}

/* MAGENTA / CHOICE */
.magenta-button, .bottomchoice {
  border-color: #992e68;
  color: #992e68 !important;
}
.magenta-button:hover, .bottomchoice:hover {
  background-color: #992e68;
  color: #fff !important;
}

/* ORANGE / SPECIAL */
.orange-button, .medorange-button, .bottomspecial {
  border-color: #b8621f;
  color: #b8621f !important;
}
.orange-button:hover, .medorange-button:hover, .bottomspecial:hover {
  background-color: #b8621f;
  color: #fff !important;
}

/* YELLOW, PURPLE, GREY (Original classes preserved) */
.yellow-button { border-color: #6b6e1a; color: #6b6e1a !important; }
.yellow-button:hover { background-color: #6b6e1a; color: #fff !important; }
.purple-button, .smpurple-button, .medpurple-button { border-color: #5c3d99; color: #5c3d99 !important; }
.purple-button:hover { background-color: #5c3d99; color: #fff !important; }
.grey-button { border-color: #999; color: #999 !important; }
.grey-button:hover { background-color: #999; color: #fff !important; }

/* RED OUTLINE (disabled placeholder) */
.red-outline-button {
  border-color: #e63946;
  color: #e63946 !important;
  opacity: 0.85;
  cursor: not-allowed !important;
}
.red-outline-button:hover {
  background: transparent;
  color: #e63946 !important;
  cursor: not-allowed !important;
}


/* ----------------------------------------------------------
   3. BOTTOM BUTTON SIZE OVERRIDES
   ---------------------------------------------------------- */
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  font-size: 1.25rem;
  padding: 0.4em 1.4em;
  margin: 8px 4px;
}

/* ----------------------------------------------------------
   4. MOBILE
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .green-button, .red-button, .blue-button, .magenta-button, .purple-button {
    font-size: 0.75rem;
    padding: 0.2em 0.7em;
  }
  .bottomnext, .bottomchoice, .bottomspecial, .bottomblue {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
  .bottomred {
    font-size: 0.85rem;
    padding: 0.3em 0.9em;
  }
}

/* ----------------------------------------------------------
   5. CODEX BUTTONS (large variant)
   Green is the default; color variants override border/text.
   ---------------------------------------------------------- */

/* SHARED STRUCTURE */
.codex-button, .codex-green, .codex-yellow, .codex-blue,
.codex-purple, .codex-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 3.4em;
  padding: 0.36em 1.4em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 24px;
  border: 2px solid;
  background: transparent;
  margin: 8px 4px;
  cursor: pointer;
  transition: background-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}

/* ACTIVE ANIMATION */
.codex-button:active, .codex-green:active, .codex-yellow:active,
.codex-blue:active, .codex-purple:active, .codex-red:active {
  transform: scale(0.95);
}

/* GREEN (DEFAULT) */
.codex-button, .codex-green {
  border-color: #1a7e36;
  color: #1a7e36 !important;
}
.codex-button:hover, .codex-green:hover {
  background-color: #1a7e36;
  color: #fff !important;
}

/* YELLOW */
.codex-yellow {
  border-color: #6b6e1a;
  color: #6b6e1a !important;
}
.codex-yellow:hover {
  background-color: #6b6e1a;
  color: #fff !important;
}

/* BLUE */
.codex-blue {
  border-color: #2a4d8c;
  color: #2a4d8c !important;
}
.codex-blue:hover {
  background-color: #2a4d8c;
  color: #fff !important;
}

/* PURPLE */
.codex-purple {
  border-color: #5c3d99;
  color: #5c3d99 !important;
}
.codex-purple:hover {
  background-color: #5c3d99;
  color: #fff !important;
}

/* RED */
.codex-red {
  border-color: #a63228;
  color: #a63228 !important;
}
.codex-red:hover {
  background-color: #a63228;
  color: #fff !important;
}

/* MOBILE */
@media (max-width: 480px) {
  .codex-button, .codex-green, .codex-yellow, .codex-blue,
  .codex-purple, .codex-red {
    font-size: 1.1rem;
    padding: 0.32em 1.1em;
    border-radius: 20px;
  }
}


.donate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 1.4em;        /* matches bottom nav button padding */

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;              /* matches bottom nav buttons */
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;

  border-radius: 20px;          /* pill — consistent with full button system */
  border: none;
  background: #E11845;          /* old deep amber #9e6b10 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

  transition: background-color 0.13s ease, transform 0.08s ease;
}
.donate-button:hover  { background-color: #FF3366; } /* old amber #b87c14 */
.donate-button:active { transform: scale(0.96); }

@media (max-width: 600px) {
  .donate-button {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
}



.cellpadding td {padding:10px}



/* ----------------------------------------------------------
   SHARED CORE — rules identical across both contexts
   Applied via comma-separated selectors below
   ---------------------------------------------------------- */
.navbar-nav li.donate > a,
ul.mod-menu li a.donate,
ul.mod-menu li.donate > a {
  display: inline-flex !important;    /* needs !important — Joomla core sets display:block */
  align-items: center;
  gap: 0.45em;
  width: auto !important;             /* needs !important — Joomla core sets width:100% */
  height: auto !important;
  line-height: 1;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;                    /* matches header donate + bottom nav buttons */
  font-weight: 700;
  padding: 0.4em 1.4em !important;   /* needs !important — Joomla core sets nav padding */
  background: #E11845 !important;     /* needs !important — Joomla nav bg override */
  color: #ffffff !important;          /* needs !important — Joomla nav link color override */
  border: none !important;
  border-radius: 20px;                /* pill */
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(158, 107, 16, 0.35) !important;
  transition: background-color 180ms ease,
              transform 100ms ease,
              box-shadow 180ms ease;
  margin: auto 0;
}

/* Heart prefix */
.navbar-nav li.donate > a::before,
ul.mod-menu li a.donate::before,
ul.mod-menu li.donate > a::before {
  content: '♥';  /* ♥ */
  font-size: 0.85em;
  color: #ffffff;
  transition: transform 200ms ease;
}

/* Hover */
.navbar-nav li.donate > a:hover,
ul.mod-menu li a.donate:hover,
ul.mod-menu li.donate > a:hover {
  background: #FF3366 !important;     /* needs !important — Joomla hover override */
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(158, 107, 16, 0.45);
}

.navbar-nav li.donate > a:hover::before,
ul.mod-menu li a.donate:hover::before,
ul.mod-menu li.donate > a:hover::before {
  transform: scale(1.25);
}

/* Active / press */
.navbar-nav li.donate > a:active,
ul.mod-menu li a.donate:active,
ul.mod-menu li.donate > a:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(158, 107, 16, 0.2);
}

/* Mobile */
@media (max-width: 600px) {
  .navbar-nav li.donate > a,
  ul.mod-menu li a.donate,
  ul.mod-menu li.donate > a {
    font-size: 0.88rem !important;
    padding: 0.35em 1.1em !important;
  }
}


.container-header {background: linear-gradient(to right, #015219, #3cc063);}
.container-footer {background: linear-gradient(to right, #015219, #3cc063);}
/* .com-content-article__body a {color: #025e07} */

.navbar-brand img,
a[href="/"] img,
img[alt="Project ARKHAIA"] {
  width: 100% !important;
  max-width: 850px !important;
  height: auto !important;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;        /* up from 300 — better legibility at small sizes */
  font-size: 1.25rem;         /* respects browser font preferences; ~16px at default */
  line-height: 2;        /* unitless — scales with font-size */
  color: #333;
  background-color: #fff;
}

.com-content-article__body a:not([class]) {
  color: #1a7e36;
}


ul li, ol li {
  line-height: 2.75;        /* 300% is 3× line height — unusually tall, reined in here */
  font-size: 1.1em;       /* list item text — larger than body */
}

ul li::marker, ol li::marker {
  font-size: 0.5em;        /* marker is relative to the li font-size */
}

h5 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #4a5a7a;
  border: 1px solid #4a5a7a;
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 3px;
  letter-spacing: 0.03em;
  margin-bottom: 0.5em;
}

/* ----------------------------------------------------------
   1. SHARED STRUCTURE
   Targets ALL old classes + the new bottom classes
   ---------------------------------------------------------- */
.green-button, .smgreen-button, .red-button, .blue-button, 
.yellow-button, .magenta-button, .purple-button, .smpurple-button, 
.medpurple-button, .orange-button, .medorange-button, .grey-button, 
.red-outline-button,
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 2.1em;
  padding: 0.22em 0.85em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 20px;
  border: 2px solid;
  background: transparent;
  margin: 2px;
  cursor: pointer;

  transition: background-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}

/* Global Active Animation */
.green-button:active, .red-button:active, .blue-button:active, 
.bottomnext:active, .bottomchoice:active, .bottomred:active {
  transform: scale(0.95);
}

/* ----------------------------------------------------------
   2. SHARED COLORS (Grouping old classes with bottom classes)
   ---------------------------------------------------------- */

/* GREEN */
.green-button, .smgreen-button, .bottomnext {
  border-color: #1a7e36;
  color: #1a7e36 !important;
}
.green-button:hover, .smgreen-button:hover, .bottomnext:hover {
  background-color: #1a7e36;
  color: #fff !important;
}

/* RED */
.red-button, .bottomred {
  border-color: #a63228;
  color: #a63228 !important;
}
.red-button:hover, .bottomred:hover {
  background-color: #a63228;
  color: #fff !important;
}

/* BLUE */
.blue-button, .bottomblue {
  border-color: #2a4d8c;
  color: #2a4d8c !important;
}
.blue-button:hover, .bottomblue:hover {
  background-color: #2a4d8c;
  color: #fff !important;
}

/* MAGENTA / CHOICE */
.magenta-button, .bottomchoice {
  border-color: #992e68;
  color: #992e68 !important;
}
.magenta-button:hover, .bottomchoice:hover {
  background-color: #992e68;
  color: #fff !important;
}

/* ORANGE / SPECIAL */
.orange-button, .medorange-button, .bottomspecial {
  border-color: #b8621f;
  color: #b8621f !important;
}
.orange-button:hover, .medorange-button:hover, .bottomspecial:hover {
  background-color: #b8621f;
  color: #fff !important;
}

/* YELLOW, PURPLE, GREY (Original classes preserved) */
.yellow-button { border-color: #6b6e1a; color: #6b6e1a !important; }
.yellow-button:hover { background-color: #6b6e1a; color: #fff !important; }
.purple-button, .smpurple-button, .medpurple-button { border-color: #5c3d99; color: #5c3d99 !important; }
.purple-button:hover { background-color: #5c3d99; color: #fff !important; }
.grey-button { border-color: #999; color: #999 !important; }
.grey-button:hover { background-color: #999; color: #fff !important; }

/* RED OUTLINE (disabled placeholder) */
.red-outline-button {
  border-color: #e63946;
  color: #e63946 !important;
  opacity: 0.85;
  cursor: not-allowed !important;
}
.red-outline-button:hover {
  background: transparent;
  color: #e63946 !important;
  cursor: not-allowed !important;
}


/* ----------------------------------------------------------
   3. BOTTOM BUTTON SIZE OVERRIDES
   ---------------------------------------------------------- */
.bottomnext, .bottomchoice, .bottomspecial, .bottomblue, .bottomred {
  font-size: 1.25rem;
  padding: 0.4em 1.4em;
  margin: 8px 4px;
}

/* ----------------------------------------------------------
   4. MOBILE
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .green-button, .red-button, .blue-button, .magenta-button, .purple-button {
    font-size: 0.75rem;
    padding: 0.2em 0.7em;
  }
  .bottomnext, .bottomchoice, .bottomspecial, .bottomblue {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
  .bottomred {
    font-size: 0.85rem;
    padding: 0.3em 0.9em;
  }
}


.donate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 1.4em;        /* matches bottom nav button padding */

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;              /* matches bottom nav buttons */
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;

  border-radius: 20px;          /* pill — consistent with full button system */
  border: none;
  background: #E11845;          /* old deep amber #9e6b10 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

  transition: background-color 0.13s ease, transform 0.08s ease;
}
.donate-button:hover  { background-color: #FF3366; } /* old amber #b87c14 */
.donate-button:active { transform: scale(0.96); }

@media (max-width: 600px) {
  .donate-button {
    font-size: 0.88rem;
    padding: 0.35em 1.1em;
  }
}



.cellpadding td {padding:10px}



/* ----------------------------------------------------------
   SHARED CORE — rules identical across both contexts
   Applied via comma-separated selectors below
   ---------------------------------------------------------- */
.navbar-nav li.donate > a,
ul.mod-menu li a.donate,
ul.mod-menu li.donate > a {
  display: inline-flex !important;    /* needs !important — Joomla core sets display:block */
  align-items: center;
  gap: 0.45em;
  width: auto !important;             /* needs !important — Joomla core sets width:100% */
  height: auto !important;
  line-height: 1;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;                    /* matches header donate + bottom nav buttons */
  font-weight: 700;
  padding: 0.4em 1.4em !important;   /* needs !important — Joomla core sets nav padding */
  background: #E11845 !important;     /* needs !important — Joomla nav bg override */
  color: #ffffff !important;          /* needs !important — Joomla nav link color override */
  border: none !important;
  border-radius: 20px;                /* pill */
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(158, 107, 16, 0.35) !important;
  transition: background-color 180ms ease,
              transform 100ms ease,
              box-shadow 180ms ease;
  margin: auto 0;
}

/* Heart prefix */
.navbar-nav li.donate > a::before,
ul.mod-menu li a.donate::before,
ul.mod-menu li.donate > a::before {
  content: '♥';  /* ♥ */
  font-size: 0.85em;
  color: #ffffff;
  transition: transform 200ms ease;
}

/* Hover */
.navbar-nav li.donate > a:hover,
ul.mod-menu li a.donate:hover,
ul.mod-menu li.donate > a:hover {
  background: #FF3366 !important;     /* needs !important — Joomla hover override */
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(158, 107, 16, 0.45);
}

.navbar-nav li.donate > a:hover::before,
ul.mod-menu li a.donate:hover::before,
ul.mod-menu li.donate > a:hover::before {
  transform: scale(1.25);
}

/* Active / press */
.navbar-nav li.donate > a:active,
ul.mod-menu li a.donate:active,
ul.mod-menu li.donate > a:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(158, 107, 16, 0.2);
}

/* Mobile */
@media (max-width: 600px) {
  .navbar-nav li.donate > a,
  ul.mod-menu li a.donate,
  ul.mod-menu li.donate > a {
    font-size: 0.88rem !important;
    padding: 0.35em 1.1em !important;
  }
}


/* =============================================================
   LATIN SIDE GLOSS READER — CSS Overrides
   Paste into: Joomla > System > Site Template Styles >
               Cassiopeia > [your style] > User CSS tab
               (or templates/cassiopeia/css/user.css)

   All rules are scoped to .latin-reader so there is no
   risk of collision with Joomla or Bootstrap styles.

   Companion script: latin-reader.js (loaded site-wide).
   The script powers cross-paragraph lemma highlighting
   by toggling .lemma-active on every <strong> and
   .gloss-entry sharing the same lemma-X class.
   ============================================================= */

/* ── Outer wrapper ─────────────────────────────────────────── */

.latin-reader {
  border: 1px solid #c8b89a;
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* Tiered variant: lives inside an accordion that already provides its own
   frame, so the inner border becomes redundant. Drop the border and the
   border-radius; keep padding modest so content sits neatly within the
   accordion panel. */
.latin-reader.latin-reader--tiered {
  border: none;
  border-radius: 0;
  padding: 0.5rem 0;
  margin-bottom: 0;
}

/* ── Title bar ─────────────────────────────────────────────── */

.latin-reader .reader-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #c8b89a;
  letter-spacing: 0.02em;
}

.latin-reader .reader-title .tier-label {
  font-weight: normal;
}

/* ── Paragraph pair ────────────────────────────────────────── */
/*
   Each .latin-pair is one Bootstrap row pairing a Latin
   paragraph with its corresponding glosses. No visible
   divider between pairs — separation is whitespace only.
*/

.latin-reader .latin-pair {
  margin-bottom: 1.1rem;
}

.latin-reader .latin-pair:last-child {
  margin-bottom: 0;
}

/* ── Latin text column ─────────────────────────────────────── */
/*
   Each .latin-text div also carries class="alpheios-enabled"
   and lang="lat" so the Alpheios embedded library can attach
   to the Latin text in every paragraph. See template markup.
*/

.latin-reader .latin-text {
  font-size: 1.3rem;
  line-height: 2.0;
  padding-right: 1rem;
  border-right: 1px solid #c8b89a;
}

.latin-reader .latin-text strong,
.latin-reader .latin-text b {
  font-weight: 700;
}

/* Greek text inline */
.latin-reader .latin-text .greek {
  font-style: italic;
}

/* ── Gloss column ──────────────────────────────────────────── */

.latin-reader .gloss-panel {
  font-size: 1rem;
  line-height: 1.65;
  padding-left: 1rem;
}

/*
   .gloss-heading appears only in the FIRST .latin-pair.
   Omit it from all subsequent pairs.
*/
.latin-reader .gloss-panel .gloss-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: bold;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid #c8b89a;
  padding-bottom: 0.2rem;
}

/* ── Individual gloss entry ────────────────────────────────── */

.latin-reader .gloss-entry {
  margin-bottom: 0.35rem;
}

.latin-reader .gloss-entry:last-child {
  margin-bottom: 0;
}

.latin-reader .gloss-entry .gloss-term {
  font-weight: 700;
}

.latin-reader .gloss-entry .gloss-sep {
  margin: 0 0.2em;
}

.latin-reader .gloss-entry .gloss-def {
  font-style: italic;
}

/* ---------------------------------------------------------------
   Gloss hover highlighting — within paragraph
   Requires: .gloss-ref.gloss-N on <strong> in latin-text
             .gloss-entry.gloss-N on matching .gloss-entry div
   Uses :has() — supported in all modern browsers (Chrome 105+,
   Firefox 121+, Safari 15.4+).
   Numbering is local to each .latin-pair and resets at every
   new paragraph. Supports up to gloss-25 per paragraph.
--------------------------------------------------------------- */

/* Hovering the bold word highlights its gloss entry */
.latin-pair:has(.gloss-ref.gloss-1:hover) .gloss-entry.gloss-1,
.latin-pair:has(.gloss-ref.gloss-2:hover) .gloss-entry.gloss-2,
.latin-pair:has(.gloss-ref.gloss-3:hover) .gloss-entry.gloss-3,
.latin-pair:has(.gloss-ref.gloss-4:hover) .gloss-entry.gloss-4,
.latin-pair:has(.gloss-ref.gloss-5:hover) .gloss-entry.gloss-5,
.latin-pair:has(.gloss-ref.gloss-6:hover) .gloss-entry.gloss-6,
.latin-pair:has(.gloss-ref.gloss-7:hover) .gloss-entry.gloss-7,
.latin-pair:has(.gloss-ref.gloss-8:hover) .gloss-entry.gloss-8,
.latin-pair:has(.gloss-ref.gloss-9:hover) .gloss-entry.gloss-9,
.latin-pair:has(.gloss-ref.gloss-10:hover) .gloss-entry.gloss-10,
.latin-pair:has(.gloss-ref.gloss-11:hover) .gloss-entry.gloss-11,
.latin-pair:has(.gloss-ref.gloss-12:hover) .gloss-entry.gloss-12,
.latin-pair:has(.gloss-ref.gloss-13:hover) .gloss-entry.gloss-13,
.latin-pair:has(.gloss-ref.gloss-14:hover) .gloss-entry.gloss-14,
.latin-pair:has(.gloss-ref.gloss-15:hover) .gloss-entry.gloss-15,
.latin-pair:has(.gloss-ref.gloss-16:hover) .gloss-entry.gloss-16,
.latin-pair:has(.gloss-ref.gloss-17:hover) .gloss-entry.gloss-17,
.latin-pair:has(.gloss-ref.gloss-18:hover) .gloss-entry.gloss-18,
.latin-pair:has(.gloss-ref.gloss-19:hover) .gloss-entry.gloss-19,
.latin-pair:has(.gloss-ref.gloss-20:hover) .gloss-entry.gloss-20,
.latin-pair:has(.gloss-ref.gloss-21:hover) .gloss-entry.gloss-21,
.latin-pair:has(.gloss-ref.gloss-22:hover) .gloss-entry.gloss-22,
.latin-pair:has(.gloss-ref.gloss-23:hover) .gloss-entry.gloss-23,
.latin-pair:has(.gloss-ref.gloss-24:hover) .gloss-entry.gloss-24,
.latin-pair:has(.gloss-ref.gloss-25:hover) .gloss-entry.gloss-25,
{
  background-color: #f5ecd7;
  border-radius: 3px;
  padding: 0 0.2em;
  margin-left: -0.2em;
}

/* Hovering the gloss entry highlights the matching bold word(s) */
.latin-pair:has(.gloss-entry.gloss-1:hover) .gloss-ref.gloss-1,
.latin-pair:has(.gloss-entry.gloss-2:hover) .gloss-ref.gloss-2,
.latin-pair:has(.gloss-entry.gloss-3:hover) .gloss-ref.gloss-3,
.latin-pair:has(.gloss-entry.gloss-4:hover) .gloss-ref.gloss-4,
.latin-pair:has(.gloss-entry.gloss-5:hover) .gloss-ref.gloss-5,
.latin-pair:has(.gloss-entry.gloss-6:hover) .gloss-ref.gloss-6,
.latin-pair:has(.gloss-entry.gloss-7:hover) .gloss-ref.gloss-7,
.latin-pair:has(.gloss-entry.gloss-8:hover) .gloss-ref.gloss-8,
.latin-pair:has(.gloss-entry.gloss-9:hover) .gloss-ref.gloss-9,
.latin-pair:has(.gloss-entry.gloss-10:hover) .gloss-ref.gloss-10,
.latin-pair:has(.gloss-entry.gloss-11:hover) .gloss-ref.gloss-11,
.latin-pair:has(.gloss-entry.gloss-12:hover) .gloss-ref.gloss-12,
.latin-pair:has(.gloss-entry.gloss-13:hover) .gloss-ref.gloss-13,
.latin-pair:has(.gloss-entry.gloss-14:hover) .gloss-ref.gloss-14,
.latin-pair:has(.gloss-entry.gloss-15:hover) .gloss-ref.gloss-15,
.latin-pair:has(.gloss-entry.gloss-16:hover) .gloss-ref.gloss-16,
.latin-pair:has(.gloss-entry.gloss-17:hover) .gloss-ref.gloss-17,
.latin-pair:has(.gloss-entry.gloss-18:hover) .gloss-ref.gloss-18,
.latin-pair:has(.gloss-entry.gloss-19:hover) .gloss-ref.gloss-19,
.latin-pair:has(.gloss-entry.gloss-20:hover) .gloss-ref.gloss-20,
.latin-pair:has(.gloss-entry.gloss-21:hover) .gloss-ref.gloss-21,
.latin-pair:has(.gloss-entry.gloss-22:hover) .gloss-ref.gloss-22,
.latin-pair:has(.gloss-entry.gloss-23:hover) .gloss-ref.gloss-23,
.latin-pair:has(.gloss-entry.gloss-24:hover) .gloss-ref.gloss-24,
.latin-pair:has(.gloss-entry.gloss-25:hover) .gloss-ref.gloss-25,
{
  background-color: #f5ecd7;
  border-radius: 2px;
  padding: 0 0.1em;
}

/* ---------------------------------------------------------------
   Cross-paragraph lemma highlighting (driven by latin-reader.js)
   When the user hovers a <strong> or .gloss-entry carrying a
   lemma-X class, the script adds .lemma-active to every other
   element in the same .latin-reader sharing that lemma-X class.
   This bridges across .latin-pair blocks so a word can be
   glossed once per passage and still hover-highlight wherever
   it reappears.

   The panel uses a single-slot reveal model: gloss entries are
   hidden by default and only the active one becomes visible.
   The .gloss-heading (column label) remains visible at all
   times in the first paragraph's panel.
--------------------------------------------------------------- */

/* Highlight the bolded word in the Latin column when its lemma is active */
.latin-reader .latin-text .lemma-active {
  background-color: #f5ecd7;
  border-radius: 3px;
  padding: 0 0.2em;
  margin-left: -0.2em;
}

/* Hide all gloss entries by default — single-slot reveal */
.latin-reader .gloss-entry {
  display: none;
}

/* Reveal only the entry whose lemma is currently active */
.latin-reader .gloss-entry.lemma-active {
  display: block;
}

/* Reserve panel column height so the page doesn't reflow when
   a gloss appears or disappears. The min-height matches roughly
   two lines of gloss content at the panel's font-size. */
.latin-reader .gloss-panel {
  min-height: 3.5em;
}

/* Cursor cue on glossed words */
.latin-reader .latin-text .gloss-ref {
  cursor: default;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 480px) {
  .latin-reader .latin-text {
    font-size: 0.88rem;
    padding-right: 0.6rem;
  }
  .latin-reader .gloss-panel {
    font-size: 0.72rem;
    padding-left: 0.6rem;
  }
}

iframe {
  width: 100%;
  aspect-ratio: 16 / 9; /* Sets the shape (e.g., 16:9 for most videos) */
  height: auto;
}

blockquote {
  margin: 1.2em 0 1.2em 1.5em;
  padding: 0.7em 1.2em;
  border-left: 4px solid #008000;
  background: #f4f9f4;
  font-style: italic;
  color: #1a1a1a;
  border-radius: 2px;
}

blockquote p {
  margin: 0;
}

blockquote p + p {
  margin-top: 0.5em;
}

/* ============================================================
   Operation LAPIS — CODEX attunement card styles
   Paste this once into the site's user.css.
   Every selector is namespaced under .lapis-att, so these rules
   affect only attunement content and nothing else on the site.
   Each attunement page needs its outer .lapis-att wrapper div,
   but no <style> block.
   ============================================================ */

.lapis-att { max-width: 1080px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2933; background: #f6f7f9; border: 1px solid #e1e5ea; border-radius: 14px; padding: 22px; line-height: 1.55; }
.lapis-att * { box-sizing: border-box; }
.lapis-att-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.lapis-att-head h2 { font-size: 20px; font-weight: 600; margin: 0 0 2px; color: #1f2933; }
.lapis-att-head p { font-size: 13px; color: #66707a; margin: 0; }
.lapis-att-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lapis-att-card { background: #ffffff; border: 1px solid #e1e5ea; border-radius: 12px; padding: 16px 18px; }
@media (max-width: 640px) { .lapis-att-grid { grid-template-columns: 1fr; } }
.lapis-att-cardhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.lapis-att-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: #1f2933; }
.lapis-att-tag { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 8px; background: #eef0f3; color: #52606d; }
.lapis-att-actions { display: flex; gap: 8px; flex-shrink: 0; }
.lapis-att-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; text-decoration: none; padding: 8px 13px; border-radius: 8px; white-space: nowrap; cursor: pointer; }
.lapis-att-btn-primary { background: #5c3d99; color: #ffffff; border: 1px solid #5c3d99; }
.lapis-att-btn-primary:hover { background: #4a3080; border-color: #4a3080; color: #ffffff; }
.lapis-att-btn-ghost { background: #ffffff; color: #1f2933; border: 1px solid #cbd2d9; }
.lapis-att-btn-ghost:hover { background: #f1f3f5; color: #1f2933; }
.lapis-att-btn svg { width: 15px; height: 15px; }
.lapis-att-setbtn { font-size: 14px; padding: 9px 15px; }
.lapis-att-preview { width: 100%; min-height: 190px; border: 1px dashed #cbd2d9; border-radius: 8px; background: #fafbfc; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.lapis-att-preview span { font-size: 13px; color: #9aa5b1; max-width: 360px; }
.lapis-att-frame { width: 100%; min-height: 320px; border: 1px solid #e1e5ea; border-radius: 8px; }
.lapis-att-prompt { border-left: 4px solid #5c3d99; }
.lapis-att-prompttext p { font-size: 18px; line-height: 1.6; color: #1f2933; margin: 0 0 12px; }
.lapis-att-prompttext p:last-child { margin: 0; color: #52606d; font-size: 15px; }