/* ---------------------------------------------------------------------------
   1. Tokens

   Every custom property is prefixed --mjr- so it cannot be read or overwritten
   by the host site's own variables, and every class is prefixed .mjr-.

   THE OFFICIAL JOURNAL PALETTE. Four colours, supplied by the Journal team:

     #1B637B  primary     ~30%   headings, buttons, links, dark grounds
     #2DC4DD  highlight   ~10%   accents, rules, marks - NEVER text
     #FDFDFD  background  ~60%   the page
     #C9972B  gold        2-5%   prestige accent - NEVER text

   Everything else here is a lightness variation of one of those four, or a
   neutral derived from the primary hue. No fifth colour is introduced.

   ACCESSIBILITY NOTE, measured against #FDFDFD:
     #1B637B  6.67:1  - safe for text, and for white text on it as a fill
     #2DC4DD  2.11:1  - fails for text at any size; accents only
     #C9972B  2.66:1  - fails for text at any size; accents only
   That is why gold is a hairline and a rule in this stylesheet and never a
   label, and why the primary call to action is primary teal rather than gold.
   --------------------------------------------------------------------------- */

:root {
  /* Primary - #1b637b is the official value; the rest are lightness steps. */
  --mjr-primary-900: #0d2f3a;
  --mjr-primary-800: #123f4e;
  --mjr-primary-700: #164f62;
  --mjr-primary-600: #1b637b;
  --mjr-primary-500: #24788f;
  --mjr-primary-300: #7fb4c4;
  --mjr-primary-100: #e4eff3;

  /* Highlight / turquoise - #2dc4dd is the official value. Accents only. */
  --mjr-highlight-600: #1a9cb4;
  --mjr-highlight-500: #2dc4dd;
  --mjr-highlight-300: #8fdeeb;
  --mjr-highlight-100: #e6f8fb;

  /* Gold - #c9972b is the official value. Prestige accent, never text. */
  --mjr-gold-600: #a87c22;
  --mjr-gold-500: #c9972b;
  --mjr-gold-300: #e0be76;
  --mjr-gold-100: #f7eed8;

  /* Background */
  --mjr-bg: #fdfdfd;
  --mjr-bg-raised: #ffffff;
  --mjr-bg-sunken: #f4f7f8;

  /* Text - neutrals on the primary hue, all AA or better on the background. */
  --mjr-text: #0d2f3a;
  --mjr-text-muted: #456570;
  --mjr-text-soft: #587682;
  --mjr-text-on-dark: #f2f8fa;
  --mjr-text-on-dark-muted: #b8d4dd;

  /* Lines */
  --mjr-rule: #e3eaed;
  --mjr-rule-strong: #c6d5da;
  --mjr-rule-on-dark: rgba(255, 255, 255, 0.16);

  /* Status - hue-neutral where the palette has no equivalent. */
  --mjr-ok-bg: #e8f3ec;
  --mjr-ok-fg: #1f5c3a;
  --mjr-warn-bg: var(--mjr-gold-100);
  --mjr-warn-fg: #7a5a12;
  --mjr-info-bg: var(--mjr-highlight-100);
  --mjr-info-fg: var(--mjr-primary-700);
  --mjr-err-bg: #fbecec;
  --mjr-err-fg: #8a2222;

  /* Type - serif for titles, Poppins for everything else, as specified by the
     Journal team. Poppins is self-hosted in assets/fonts (see section 2), so
     the module makes no third-party request at runtime. */
  --mjr-font-display: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  --mjr-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mjr-font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --mjr-measure: 68ch;
  --mjr-container: 1180px;
  --mjr-gutter: clamp(1rem, 4vw, 2.5rem);
  --mjr-section-y: clamp(3rem, 7vw, 5.5rem);

  /* Depth */
  --mjr-radius: 4px;
  --mjr-radius-lg: 8px;
  --mjr-shadow-sm: 0 1px 2px rgba(13, 47, 58, 0.05);
  --mjr-shadow: 0 2px 4px rgba(13, 47, 58, 0.05), 0 8px 20px -12px rgba(13, 47, 58, 0.2);
  --mjr-shadow-lg: 0 4px 8px rgba(13, 47, 58, 0.06), 0 24px 48px -24px rgba(13, 47, 58, 0.3);

  --mjr-focus: 0 0 0 3px var(--mjr-bg), 0 0 0 5px var(--mjr-gold-500);
}
/* ---------------------------------------------------------------------------
   1b. Poppins, self-hosted

   The Journal team specified Poppins for body and interface text. It is served
   from assets/fonts rather than a font CDN: the module is handed to an IT team
   to drop into an existing site, and it must not add a third-party request or
   depend on an outside host being reachable. Latin subset only, four weights.

   font-display: swap so text is readable immediately in the serif fallback if
   the face is still loading.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   2. Reset and base
   --------------------------------------------------------------------------- */

/* Every rule here is scoped under .mjr.
   An unscoped `body`, `a` or `img` rule would reach out of the Journal
   section and restyle the host site's own page, which is exactly what a
   module must never do. The .mjr element itself carries the type and colour
   context (see section 6); these rules only normalise what is inside it. */

.mjr img,
.mjr svg,
.mjr picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Wrapped in :where() for the same reason as the form elements below: a bare
   `.mjr a` (0,1,1) outranks a component class like `.mjr-nav__link` (0,1,0),
   which rendered the section navigation in dark teal on a dark teal ground. */
.mjr :where(a) {
  color: var(--mjr-primary-700);
  text-decoration-color: var(--mjr-gold-300);
  text-underline-offset: 0.18em;
}

.mjr :where(a:hover) {
  color: var(--mjr-primary-700);
  text-decoration-color: var(--mjr-gold-500);
}

.mjr :focus-visible {
  outline: none;
  box-shadow: var(--mjr-focus);
  border-radius: 2px;
}

/* :where() contributes no specificity, so a component class always wins.
   Without it, `.mjr button` (0,1,1) silently overrode `.mjr-nav__link`
   (0,1,0) and the nav's dropdown triggers ignored their own colour. */
.mjr :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.mjr hr {
  border: 0;
  border-top: 1px solid var(--mjr-rule);
  margin: 2.5rem 0;
}

.mjr ::selection {
  background: var(--mjr-gold-100);
  color: var(--mjr-primary-900);
}

/* Skip link - first focusable element on every page. */
.mjr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--mjr-primary-800);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  border-radius: 0 0 var(--mjr-radius) 0;
}

.mjr-skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   3. Layout primitives
   --------------------------------------------------------------------------- */

.mjr-container {
  width: 100%;
  max-width: var(--mjr-container);
  margin-inline: auto;
  padding-inline: var(--mjr-gutter);
}

.mjr-container--narrow {
  max-width: 60rem;
}

.mjr-section {
  padding-block: var(--mjr-section-y);
}

.mjr-section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.mjr-section--paper {
  background: var(--mjr-bg-raised);
  border-block: 1px solid var(--mjr-rule);
}

.mjr-section--sunken {
  background: var(--mjr-bg-sunken);
  border-block: 1px solid var(--mjr-rule);
}

.mjr-section--ink .mjr-section-header__title {
  color: #fff;
}

.mjr-section--ink .mjr-section-header__lede,
.mjr-section--ink .mjr-section-header__eyebrow {
  color: var(--mjr-text-on-dark-muted);
}

.mjr-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.mjr-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.mjr-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}.mjr-stack > * + * {
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   4. Typography and prose
   --------------------------------------------------------------------------- */

/* :where() so these carry no element specificity. Component classes such as
   .mjr-cta__title set their own colour and size and must win; before this,
   `.mjr h2` (0,1,1) beat `.mjr-cta__title` (0,1,0) and painted the CTA
   heading dark on a dark ground. */
.mjr :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--mjr-font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: var(--mjr-primary-900);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

.mjr :where(h1) {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
}

.mjr :where(h2) {
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem);
}

.mjr :where(h3) {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
}

.mjr :where(h4) {
  font-size: 1.0625rem;
  font-family: var(--mjr-font-ui);
  font-weight: 650;
  letter-spacing: 0;
}

.mjr p {
  margin: 0 0 1.15em;
}

.mjr p:last-child {
  margin-bottom: 0;
}.mjr-prose {
  max-width: var(--mjr-measure);
}

.mjr-prose h2 {
  margin-top: 2.25em;
}

.mjr-prose h3 {
  margin-top: 1.9em;
}

.mjr-prose > :first-child {
  margin-top: 0;
}

.mjr-prose ul,
.mjr-prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em;
}

.mjr-prose li + li {
  margin-top: 0.4em;
}

.mjr-prose li::marker {
  color: var(--mjr-gold-500);
}

/* A checked list used for objectives and requirement lists. */
.mjr-marker-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mjr-marker-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.85rem;
}

.mjr-marker-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--mjr-gold-500);
  background: var(--mjr-gold-100);
  transform: rotate(45deg);
}

.mjr-marker-list li:last-child {
  margin-bottom: 0;
}

/* Section header block. */
.mjr-section-header {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mjr-section-header--center {
  margin-inline: auto;
  text-align: center;
}

.mjr-section-header__eyebrow {
  display: block;
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin-bottom: 0.85rem;
}

.mjr-section-header__title {
  margin-bottom: 0.5rem;
}

.mjr-section-header__lede {
  font-size: clamp(1rem, 0.97rem + 0.25vw, 1.15rem);
  color: var(--mjr-text-muted);
  margin-bottom: 0;
}

/* The hairline rule that sits under a display heading. */
.mjr-rule-brass {
  width: 3.5rem;
  height: 2px;
  background: var(--mjr-gold-500);
  border: 0;
  margin: 0 0 1.5rem;
}

.mjr-section-header--center .mjr-rule-brass {
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   5. Buttons and badges
   --------------------------------------------------------------------------- */

.mjr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--mjr-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease, box-shadow 0.18s ease;
  /* Never below the 44px comfortable touch target. */
  min-height: 2.875rem;
}

.mjr-btn:hover {
  transform: translateY(-1px);
}

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

.mjr-btn--primary {
  background: var(--mjr-primary-600);
  border-color: var(--mjr-primary-600);
  color: #fff;
  box-shadow: var(--mjr-shadow-sm);
}

.mjr-btn--primary:hover {
  background: var(--mjr-primary-800);
  border-color: var(--mjr-primary-800);
  color: #fff;
  box-shadow: var(--mjr-shadow);
}

.mjr-btn--ink {
  background: var(--mjr-primary-800);
  border-color: var(--mjr-primary-800);
  color: #fff;
}

.mjr-btn--ink:hover {
  background: var(--mjr-primary-700);
  border-color: var(--mjr-primary-700);
  color: #fff;
}

.mjr-btn--outline {
  background: transparent;
  border-color: var(--mjr-rule-strong);
  color: var(--mjr-primary-800);
}

.mjr-btn--outline:hover {
  border-color: var(--mjr-gold-500);
  color: var(--mjr-primary-700);
  background: var(--mjr-bg-raised);
}

/* On the dark hero ground. */
.mjr-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

.mjr-btn--ghost:hover {
  border-color: var(--mjr-gold-300);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.mjr-btn--sm {
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  min-height: 2.25rem;
}

.mjr-btn--block {
  width: 100%;
}

/* A submit control that is unavailable because OJS is not configured. */
.mjr-btn--disabled,
.mjr-btn[aria-disabled="true"] {
  background: var(--mjr-bg-sunken);
  border-color: var(--mjr-rule-strong);
  color: var(--mjr-text-soft);
  cursor: not-allowed;
  box-shadow: none;
}

.mjr-btn--disabled:hover,
.mjr-btn[aria-disabled="true"]:hover {
  transform: none;
  background: var(--mjr-bg-sunken);
  color: var(--mjr-text-soft);
  border-color: var(--mjr-rule-strong);
}

.mjr-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Badges ------------------------------------------------------------------ */

.mjr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
  border: 1px solid var(--mjr-rule-strong);
  color: var(--mjr-text-muted);
  background: var(--mjr-bg-raised);
  white-space: nowrap;
}.mjr-badge--brass {
  border-color: var(--mjr-gold-500);
  background: var(--mjr-gold-100);
  color: var(--mjr-primary-600);
}

.mjr-badge--ok {
  border-color: transparent;
  background: var(--mjr-ok-bg);
  color: var(--mjr-ok-fg);
}

.mjr-badge--pending {
  border-color: transparent;
  background: var(--mjr-warn-bg);
  color: var(--mjr-warn-fg);
}

.mjr-badge--muted {
  border-color: var(--mjr-rule);
  background: var(--mjr-bg-sunken);
  color: var(--mjr-text-soft);
}

.mjr-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   6. Journal section chrome: masthead, section navigation, colophon

   None of this is a website header or a website footer. The host site supplies
   those. What follows identifies the JOURNAL SECTION inside the host page and
   navigates within it.

   Everything is scoped under .mjr, so these rules cannot reach the host site's
   own markup even if a class name were to coincide.
   --------------------------------------------------------------------------- */

.mjr {
  /* The module's own type and colour context. Set here rather than on body so
     the host page's own styling outside the Journal is untouched. */
  font-family: var(--mjr-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mjr-text);
  background: var(--mjr-bg);
  /* Contains any absolutely positioned descendant, so nothing escapes into the
     host page's scroll area. */
  position: relative;
  overflow-x: clip;
}

.mjr *,
.mjr *::before,
.mjr *::after {
  box-sizing: border-box;
}

.mjr-main {
  display: block;
}

/* Skip link — the first focusable thing in the Journal section. */
.mjr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--mjr-primary-800);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  border-radius: 0 0 var(--mjr-radius) 0;
}

.mjr-skip-link:focus {
  left: 0;
  color: #fff;
}

/* Masthead ---------------------------------------------------------------- */

.mjr-masthead {
  position: relative;
  background: var(--mjr-primary-800);
  color: var(--mjr-text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.mjr-masthead__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity: 0.55;
  mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
  pointer-events: none;
}

.mjr-masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: clamp(1.25rem, 3vw, 1.85rem);
}

.mjr-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* The official lockup. Height drives the size and width stays auto, so the
   supplied artwork keeps its 4.22:1 ratio at every breakpoint. The margin is
   the logo's clear space. */
.mjr-brand__lockup {
  display: block;
  margin: 0;
  padding: 0.35rem 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: 1;
}

.mjr-brand__logo {
  display: block;
  height: clamp(2.3rem, 1.9rem + 1.7vw, 3.4rem);
  width: auto;
  max-width: 100%;
}

/* The call to action while submissions are not open yet. A disabled button
   plus a note, rather than a live-looking button with nowhere to go. */
.mjr-masthead__cta-wait {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.mjr-btn.mjr-masthead__cta[disabled] {
  background: var(--mjr-primary-600);
  border-color: var(--mjr-primary-600);
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.mjr-masthead__cta-note {
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--mjr-text-on-dark-muted);
}

.mjr-masthead__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  min-width: 0;
}

.mjr-masthead__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mjr-text-on-dark-muted);
}

.mjr-masthead__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mjr-masthead__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mjr-highlight-300);
  flex: none;
}

.mjr-masthead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.mjr-masthead__cta {
  white-space: nowrap;
}

/* Journal search ---------------------------------------------------------- */

.mjr-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--mjr-rule-on-dark);
  border-radius: var(--mjr-radius);
  overflow: hidden;
  min-width: 0;
}

.mjr-search__input {
  flex: 1;
  min-width: 0;
  width: 11rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--mjr-font-ui);
  font-size: 0.875rem;
  min-height: 2.5rem;
}

.mjr-search__input::placeholder {
  color: var(--mjr-text-on-dark-muted);
}

.mjr-search__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
}

.mjr-search__button {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--mjr-gold-300);
  cursor: pointer;
}

.mjr-search__button svg {
  width: 1.05rem;
  height: 1.05rem;
}

.mjr-search__button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

/* The search form again, on the search page itself: light ground, full width. */
.mjr-search--page {
  background: var(--mjr-bg-raised);
  border-color: var(--mjr-rule-strong);
  gap: 0.6rem;
  padding: 0.4rem;
  align-items: center;
}

.mjr-search--page .mjr-search__input {
  width: auto;
  color: var(--mjr-text);
  font-size: 1rem;
  min-height: 2.75rem;
}

.mjr-search--page .mjr-search__input::placeholder {
  color: var(--mjr-text-soft);
}

/* Section navigation ------------------------------------------------------ */

.mjr-nav {
  background: var(--mjr-primary-900);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--mjr-text-on-dark);
  position: relative;
  z-index: 30;
}

.mjr-nav__inner {
  position: relative;
}

.mjr-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mjr-rule-on-dark);
  padding: 0.9rem 0;
  color: var(--mjr-text-on-dark);
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 2.9rem;
}

.mjr-nav__bars {
  position: relative;
  display: block;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  flex: none;
}

.mjr-nav__bars::before,
.mjr-nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.mjr-nav__bars::before { top: -6px; }
.mjr-nav__bars::after  { top: 6px; }

.mjr-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mjr-nav__item {
  position: relative;
}

.mjr-nav__link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--mjr-text-on-dark-muted);
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  min-height: 2.9rem;
  font-family: var(--mjr-font-ui);
}

.mjr-nav__link:first-child { padding-left: 0; }

.mjr-nav__link:hover,
.mjr-nav__link:focus-visible {
  color: #fff;
  border-bottom-color: var(--mjr-gold-500);
}

.mjr-nav__link[aria-current="page"],
.mjr-nav__link[data-mjr-current="true"] {
  color: #fff;
  border-bottom-color: var(--mjr-gold-500);
}

.mjr-nav__caret {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  transition: transform 0.18s ease;
}

.mjr-nav__link[aria-expanded="true"] .mjr-nav__caret {
  transform: rotate(180deg);
}

.mjr-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-rule);
  border-top: 2px solid var(--mjr-gold-500);
  border-radius: 0 0 var(--mjr-radius) var(--mjr-radius);
  box-shadow: var(--mjr-shadow-lg);
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  z-index: 40;
}

.mjr-nav__panel[hidden] { display: none; }

/* Keyboard fallback when JavaScript is unavailable. */
.mjr-nav__item:focus-within .mjr-nav__panel { display: block; }

.mjr-nav__panel a {
  display: block;
  padding: 0.6rem 0.85rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.875rem;
  color: var(--mjr-primary-800);
  text-decoration: none;
  border-radius: 2px;
}

.mjr-nav__panel a:hover,
.mjr-nav__panel a:focus-visible {
  background: var(--mjr-bg-sunken);
  color: var(--mjr-primary-700);
}

.mjr-nav__panel a[aria-current="page"] {
  color: var(--mjr-primary-700);
  font-weight: 650;
}

/* Colophon ---------------------------------------------------------------- */

.mjr-colophon {
  background: var(--mjr-primary-900);
  color: var(--mjr-text-on-dark-muted);
  border-top: 3px solid var(--mjr-gold-500);
}

.mjr-colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.75rem;
  padding-block: 1.15rem;
}

.mjr-colophon__name {
  margin: 0;
  font-family: var(--mjr-font-display);
  font-size: 0.9375rem;
  color: #fff;
}

.mjr-colophon__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.mjr-colophon__facts li {
  position: relative;
}

.mjr-colophon__facts li + li::before {
  content: "\00b7";
  position: absolute;
  left: -0.7rem;
  color: var(--mjr-gold-300);
}

/* Small inline icon inside a button or link ------------------------------- */

.mjr-icon-sm {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
}

/* Shared small pieces ----------------------------------------------------- */

.mjr-eyebrow {
  display: block;
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin-bottom: 0.85rem;
}

.mjr-rule {
  width: 3.5rem;
  height: 2px;
  background: var(--mjr-gold-500);
  border: 0;
  margin: 0 0 1.5rem;
}

.mjr-count {
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  color: var(--mjr-text-soft);
  white-space: nowrap;
}

.mjr-archive-volume + .mjr-archive-volume {
  margin-top: clamp(2rem, 5vw, 3rem);
}
/* ---------------------------------------------------------------------------
   8. Sections and cards
   --------------------------------------------------------------------------- */

.mjr-card {
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-rule);
  border-radius: var(--mjr-radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mjr-card--hover:hover {
  border-color: var(--mjr-gold-300);
  box-shadow: var(--mjr-shadow);
  transform: translateY(-2px);
}

.mjr-card__title {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.mjr-card__text {
  color: var(--mjr-text-muted);
  font-size: 0.9688rem;
  line-height: 1.66;
  margin-bottom: 0;
}

/* Research area card ------------------------------------------------------ */

.mjr-area-card {
  position: relative;
  padding-top: 1.5rem;
}

.mjr-area-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2.5rem;
  height: 3px;
  background: var(--mjr-gold-500);
  transition: width 0.25s ease;
}

.mjr-area-card:hover::before {
  width: 5rem;
}

.mjr-area-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.mjr-area-card__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--mjr-gold-500);
}

.mjr-area-card__icon svg {
  width: 100%;
  height: 100%;
}

.mjr-area-card__title {
  font-size: 1.0625rem;
  line-height: 1.32;
  margin: 0.15rem 0 0;
}

/* Priority area - a denser, ink-toned variant. */
.mjr-priority-card {
  background: var(--mjr-primary-800);
  border-color: var(--mjr-primary-700);
  color: var(--mjr-text-on-dark);
}

.mjr-priority-card .mjr-area-card__title {
  color: #fff;
}

.mjr-priority-card .mjr-card__text {
  color: var(--mjr-text-on-dark-muted);
}

.mjr-priority-card .mjr-area-card__icon {
  color: var(--mjr-gold-300);
}

.mjr-priority-card::before {
  background: var(--mjr-gold-500);
}

/* Stat / figure tiles ----------------------------------------------------- */

.mjr-stat {
  border-left: 2px solid var(--mjr-gold-500);
  padding-left: 1.15rem;
}

.mjr-stat__value {
  display: block;
  font-family: var(--mjr-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  color: var(--mjr-primary-900);
  line-height: 1.1;
}

.mjr-stat__label {
  display: block;
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  color: var(--mjr-text-muted);
  margin-top: 0.35rem;
}

.mjr-section--ink .mjr-stat__value {
  color: #fff;
}

.mjr-section--ink .mjr-stat__label {
  color: var(--mjr-text-on-dark-muted);
}

/* Call to action band ----------------------------------------------------- */

.mjr-cta {
  background: var(--mjr-primary-800);
  color: var(--mjr-text-on-dark);
  border-radius: var(--mjr-radius-lg);
  padding: clamp(2rem, 5vw, 3.25rem);
  display: grid;
  gap: 1.75rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
  overflow: hidden;
}

.mjr-cta__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-size: 110px 110px;
  mask-image: linear-gradient(270deg, #000, transparent 62%);
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 62%);
  pointer-events: none;
}

.mjr-cta__body {
  position: relative;
  max-width: 42rem;
}

.mjr-cta__title {
  color: #fff;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  margin-bottom: 0.6rem;
}

.mjr-cta__text {
  color: var(--mjr-text-on-dark-muted);
  margin-bottom: 0;
}

.mjr-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------------------
   9. Editorial and advisory profiles
   --------------------------------------------------------------------------- */

.mjr-board {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mjr-board:last-child {
  margin-bottom: 0;
}

.mjr-board__heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.mjr-board__heading h2,
.mjr-board__heading h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  white-space: nowrap;
}

.mjr-board__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mjr-rule);
}

.mjr-board__count {
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  color: var(--mjr-text-soft);
  white-space: nowrap;
}

/* Editorial and advisory profile -----------------------------------------------

   One component carrying three degrees of standing:

     .mjr-profile--lead    the Editor-in-Chief
     .mjr-profile          an Editor
     .mjr-profile--assoc   an Associate Editor, or an advisory member

   The hierarchy is expressed through portrait size, name size and the weight of
   the accent rather than through three different layouts, so the page still
   reads as one board rather than three unrelated lists.

   Colour comes from the Mishkath palette only: white card, deep teal-green
   type, turquoise accent, and gold used sparingly as a hairline and a rule. */

.mjr-profile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-rule);
  border-radius: var(--mjr-radius);
  padding: 1.5rem;
  height: 100%;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* A turquoise edge that deepens on hover. Restrained on purpose: it is the only
   moving part of the card. */
.mjr-profile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mjr-highlight-300);
  transition: background-color 0.2s ease;
}

.mjr-profile:hover {
  border-color: var(--mjr-highlight-300);
  box-shadow: var(--mjr-shadow-sm);
}

.mjr-profile:hover::before {
  background: var(--mjr-highlight-500);
}

/* Associate editors and advisory members: the same card, one step quieter. */
.mjr-profile--assoc {
  padding: 1.25rem;
  gap: 1rem;
}

/* The Editor-in-Chief. A wider panel, a larger portrait and a teal ground, so
   the most senior appointment is legible as such before a word is read. */
.mjr-profile--lead {
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-color: var(--mjr-highlight-300);
  background: linear-gradient(180deg, var(--mjr-highlight-100) 0%, var(--mjr-bg-raised) 60%);
}

.mjr-profile--lead::before {
  width: 4px;
  background: var(--mjr-highlight-500);
}

/* Portrait ------------------------------------------------------------------ */

.mjr-portrait {
  flex: none;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mjr-highlight-100);
  border: 2px solid var(--mjr-bg-raised);
  box-shadow: 0 0 0 1px var(--mjr-highlight-300);
  display: grid;
  place-items: center;
  position: relative;
}

.mjr-profile--assoc .mjr-portrait {
  width: 3.85rem;
  height: 3.85rem;
}

/* Turquoise ring, then a hairline of gold outside it. */
.mjr-profile--lead .mjr-portrait {
  width: clamp(5.5rem, 14vw, 7.25rem);
  height: clamp(5.5rem, 14vw, 7.25rem);
  box-shadow:
    0 0 0 1px var(--mjr-highlight-500),
    0 0 0 5px var(--mjr-bg-raised),
    0 0 0 6px var(--mjr-gold-300);
}

.mjr-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the square crop towards the top of the frame. The supplied portraits
     are a mix of landscape and portrait orientations; a centred crop takes
     roughly a tenth off the top of the taller ones, which is where the face
     is. Landscape sources lose nothing vertically either way. */
  object-position: 50% 25%;
}

/* Neutral monogram plate. Never a photograph of an unrelated real person. */
.mjr-portrait__monogram {
  font-family: var(--mjr-font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--mjr-primary-700);
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

.mjr-profile--assoc .mjr-portrait__monogram {
  font-size: 1.3rem;
}

.mjr-profile--lead .mjr-portrait__monogram {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  color: var(--mjr-primary-800);
}

/* Body ---------------------------------------------------------------------- */

.mjr-profile__body {
  min-width: 0;
}

/* Role, above the name, in turquoise with a short gold rule beside it. */
.mjr-profile__role {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin-bottom: 0.55rem;
}

.mjr-profile__role::after {
  content: "";
  flex: 1;
  max-width: 2.25rem;
  height: 1px;
  background: var(--mjr-gold-300);
}

.mjr-profile--lead .mjr-profile__role {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.75rem;
}

.mjr-profile--lead .mjr-profile__role::after {
  max-width: 3.5rem;
  background: var(--mjr-gold-500);
}

/* Scoped under .mjr so it out-specifies the generic `.mjr h3` heading size:
   the card carries its own three-step hierarchy and must not inherit the
   document's heading scale. */
.mjr .mjr-profile__name {
  font-family: var(--mjr-font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--mjr-primary-800);
  margin: 0;
  overflow-wrap: break-word;
}

.mjr-profile--assoc .mjr-profile__name {
  font-size: 1.0625rem;
}

.mjr-profile--lead .mjr-profile__name {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  line-height: 1.22;
}

/* The gold hairline that separates the name from the appointment details. */
/* Also scoped under .mjr: `.mjr hr` is the generic rule for a horizontal rule
   and would otherwise win on specificity. */
.mjr .mjr-profile__divider {
  width: 1.75rem;
  height: 2px;
  border: 0;
  background: var(--mjr-gold-500);
  margin: 0.7rem 0 0.75rem;
}

.mjr .mjr-profile--lead .mjr-profile__divider {
  width: 2.75rem;
  background: var(--mjr-gold-500);
  margin: 0.9rem 0 0.95rem;
}

.mjr-profile__position {
  font-family: var(--mjr-font-ui);
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--mjr-text);
  margin: 0 0 0.3rem;
  line-height: 1.5;
}

.mjr-profile--lead .mjr-profile__position {
  font-size: 0.9375rem;
}

.mjr-profile__institution {
  display: flex;
  gap: 0.5rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.875rem;
  color: var(--mjr-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* A small turquoise mark, so institution reads as a distinct field from the
   academic position above it without needing a label. */
.mjr-profile__institution::before {
  content: "";
  flex: none;
  width: 2px;
  border-radius: 1px;
  background: var(--mjr-highlight-300);
}

.mjr-profile--lead .mjr-profile__institution {
  font-size: 0.9375rem;
}

/* --mjr-text-soft is 3.39:1 on white, below WCAG AA for text this size, so the
   country line uses the muted tone (5.79:1) instead. */
.mjr-profile__country {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  color: var(--mjr-text-muted);
  margin-top: 0.65rem;
}

.mjr-profile__country::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--mjr-highlight-500);
  flex: none;
}

.mjr-profile__bio {
  font-size: 0.9375rem;
  color: var(--mjr-text-muted);
  margin: 0.85rem 0 0;
  line-height: 1.6;
}

.mjr-profile__status {
  margin-top: 0.85rem;
}

/* The Editor-in-Chief sits alone above the grid of Editors. */
.mjr-board__lead {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* Two columns rather than auto-fit: with four Editors, auto-fit produces a
   three-across row and one orphan on a wide screen. Collapses with the other
   grids in the narrow-screen block below. */
.mjr-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Notice sitting above the suggested advisory board. */
.mjr-advisory-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--mjr-warn-bg);
  border: 1px solid var(--mjr-gold-300);
  border-left: 3px solid var(--mjr-gold-500);
  border-radius: var(--mjr-radius);
  padding: 1.15rem 1.35rem;
  margin-bottom: 2rem;
}

.mjr-advisory-notice__icon {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--mjr-gold-600);
  margin-top: 0.15rem;
}

.mjr-advisory-notice p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--mjr-warn-fg);
  line-height: 1.6;
}

.mjr-advisory-notice strong {
  color: var(--mjr-warn-fg);
}

/* ---------------------------------------------------------------------------
   10. Peer review workflow
   --------------------------------------------------------------------------- */

.mjr-workflow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0;
}

.mjr-workflow__step {
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}

.mjr-workflow__step:last-child {
  padding-bottom: 0;
}

/* The connecting spine. */
.mjr-workflow__step::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--mjr-gold-300), var(--mjr-rule));
  transform: translateX(-0.5px);
}

.mjr-workflow__step:last-child::before {
  display: none;
}

.mjr-workflow__marker {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-gold-300);
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--mjr-gold-600);
}

.mjr-workflow__marker::after {
  content: counter(step, decimal-leading-zero);
}

.mjr-workflow__body {
  padding-top: 0.35rem;
  min-width: 0;
}

.mjr-workflow__title {
  font-size: 1.0625rem;
  margin: 0 0 0.3rem;
}

.mjr-workflow__text {
  color: var(--mjr-text-muted);
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.62;
}

/* Editorial decision chips. */
.mjr-decisions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mjr-decision {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border: 1px solid var(--mjr-rule-strong);
  border-radius: 2rem;
  background: var(--mjr-bg-raised);
  color: var(--mjr-primary-800);
}

.mjr-decision::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mjr-gold-500);
  flex: none;
}

.mjr-decision--accept::before {
  background: #3d8659;
}

.mjr-decision--reject::before {
  background: #b05252;
}

/* ---------------------------------------------------------------------------
   11. Guidelines, roadmap, tables
   --------------------------------------------------------------------------- */

.mjr-spec-table-wrap {
  /* Wide content scrolls inside its own box; the page body never does.
     `position: relative` contains any absolutely-positioned descendant (a
     visually-hidden caption, for instance) so it cannot escape to the initial
     containing block and drag the whole page sideways. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--mjr-rule);
  border-radius: var(--mjr-radius);
  background: var(--mjr-bg-raised);
  -webkit-overflow-scrolling: touch;
}

.mjr-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  min-width: 32rem;
}

.mjr-spec-table caption {
  text-align: left;
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  padding: 1rem 1.15rem 0.5rem;
}

.mjr-spec-table th,
.mjr-spec-table td {
  text-align: left;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--mjr-rule);
  vertical-align: top;
}

.mjr-spec-table thead th {
  background: var(--mjr-bg-sunken);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mjr-text-muted);
  border-bottom: 1px solid var(--mjr-rule-strong);
  white-space: nowrap;
}

.mjr-spec-table tbody tr:last-child th,
.mjr-spec-table tbody tr:last-child td {
  border-bottom: 0;
}

.mjr-spec-table tbody th {
  font-weight: 600;
  color: var(--mjr-primary-800);
  width: 34%;
}

.mjr-spec-table td {
  color: var(--mjr-text-muted);
}

/* Definition-style specification rows. */
.mjr-speclist {
  margin: 0;
  border-top: 1px solid var(--mjr-rule);
}

.mjr-speclist__row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: 0.35rem 1.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--mjr-rule);
}

.mjr-speclist__key {
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mjr-text-muted);
  margin: 0;
}

.mjr-speclist__value {
  margin: 0;
  color: var(--mjr-text);
  font-size: 0.9688rem;
}

/* Indexing roadmap -------------------------------------------------------- */

.mjr-roadmap {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.mjr-phase {
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-rule);
  border-top: 3px solid var(--mjr-gold-500);
  border-radius: var(--mjr-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.mjr-phase__label {
  font-family: var(--mjr-font-ui);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin-bottom: 1rem;
}

.mjr-phase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.mjr-phase__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--mjr-rule);
}

.mjr-phase__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mjr-phase__name {
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  color: var(--mjr-primary-800);
  min-width: 0;
  overflow-wrap: break-word;
}/* ---------------------------------------------------------------------------
   12. Issues and articles
   --------------------------------------------------------------------------- */

/* Issue cover -------------------------------------------------------------
   A first-class element, not a file icon. The frame keeps the A4-ish
   proportion of a real journal cover whether the artwork is an uploaded image
   or the drawn Mishkath placeholder. */

.mjr-cover {
  display: block;
  position: relative;
  aspect-ratio: 420 / 594;
  background: var(--mjr-primary-800);
  border: 1px solid var(--mjr-rule);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--mjr-shadow);
  width: 100%;
}

.mjr-cover__image,
.mjr-cover__drawn {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A thin page-edge highlight, so the cover reads as a physical object. */
.mjr-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 3px 0 6px -3px rgba(255, 255, 255, 0.18),
              inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.mjr-cover--large { max-width: 22rem; }
.mjr-cover--medium { max-width: 14rem; }
.mjr-cover--thumb { max-width: 9.5rem; box-shadow: var(--mjr-shadow-sm); }

a.mjr-cover--link {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.mjr-cover--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--mjr-shadow-lg);
  border-color: var(--mjr-gold-300);
}

/* The issue page hero: cover beside the issue identity. */
.mjr-issue-hero {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: start;
}

.mjr-issue-hero__meta { min-width: 0; }

.mjr-issue-hero__journal {
  font-family: var(--mjr-font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-style: italic;
  color: var(--mjr-primary-600);
  margin: 0 0 1.25rem;
}

.mjr-issue-hero__actions { margin-top: 1.5rem; }

/* Issue information panel. */
.mjr-issue-info {
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-rule);
  border-left: 3px solid var(--mjr-gold-500);
  border-radius: var(--mjr-radius);
  padding: clamp(1.15rem, 3vw, 1.6rem);
}

.mjr-issue-info__title {
  font-family: var(--mjr-font-ui);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin: 0 0 1rem;
}

/* Archives grid - visual browsing of the publication history. */
.mjr-archive-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
}

.mjr-archive-item { min-width: 0; }

.mjr-archive-item__label {
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin: 0.9rem 0 0.2rem;
}

.mjr-archive-item__title {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 0.4rem;
}

.mjr-archive-item__title a { text-decoration: none; color: var(--mjr-primary-900); }
.mjr-archive-item__title a:hover { color: var(--mjr-primary-700); text-decoration: underline; }

/* Table of contents sections, one per article type. */
.mjr-toc-section + .mjr-toc-section { margin-top: clamp(2rem, 4vw, 3rem); }

.mjr-toc-section__heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.mjr-toc-section__heading h3 {
  margin: 0;
  font-size: 1.15rem;
  white-space: nowrap;
}

.mjr-toc-section__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mjr-rule);
}

/* The two per-article actions: read the record, or open the full text. */
.mjr-article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.mjr-article-actions .mjr-btn { min-height: 2.25rem; }

.mjr-issue-card {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-rule);
  border-radius: var(--mjr-radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  align-items: start;
}

.mjr-issue-card:hover {
  border-color: var(--mjr-gold-300);
  box-shadow: var(--mjr-shadow);
}

.mjr-issue-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mjr-issue-card__meta {
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin-bottom: 0.5rem;
}

.mjr-issue-card__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.mjr-issue-card__text {
  color: var(--mjr-text-muted);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

.mjr-issue-card__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Article entry ----------------------------------------------------------- */

.mjr-article-item {
  border-bottom: 1px solid var(--mjr-rule);
  padding: 1.5rem 0;
}

.mjr-article-item:first-child {
  padding-top: 0;
}

.mjr-article-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mjr-article-item__type {
  font-family: var(--mjr-font-ui);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin-bottom: 0.4rem;
  display: block;
}

.mjr-article-item__title {
  font-size: 1.1875rem;
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

.mjr-article-item__title a {
  text-decoration: none;
  color: var(--mjr-primary-900);
}

.mjr-article-item__title a:hover {
  color: var(--mjr-primary-700);
  text-decoration: underline;
}

.mjr-article-item__authors {
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  color: var(--mjr-text-muted);
  margin: 0 0 0.5rem;
}

.mjr-article-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  color: var(--mjr-text-soft);
}

.mjr-article-item__meta a {
  color: var(--mjr-text-soft);
}

.mjr-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.mjr-keyword {
  font-family: var(--mjr-font-ui);
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--mjr-rule);
  border-radius: 2rem;
  color: var(--mjr-text-muted);
  background: var(--mjr-bg-sunken);
}

/* Abstract block on a single article page. */
.mjr-abstract {
  background: var(--mjr-bg-raised);
  border: 1px solid var(--mjr-rule);
  border-left: 3px solid var(--mjr-gold-500);
  border-radius: var(--mjr-radius);
  padding: clamp(1.25rem, 3vw, 1.85rem);
}

.mjr-abstract__label {
  font-family: var(--mjr-font-ui);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mjr-primary-600);
  margin: 0 0 0.75rem;
}

/* ---------------------------------------------------------------------------
   13. Empty states, alerts, notices
   --------------------------------------------------------------------------- */

.mjr-empty {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--mjr-bg-raised);
  border: 1px dashed var(--mjr-rule-strong);
  border-radius: var(--mjr-radius);
}

.mjr-empty__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 1.15rem;
  color: var(--mjr-gold-500);
}

.mjr-empty__title {
  font-size: 1.1875rem;
  margin-bottom: 0.5rem;
}

.mjr-empty__text {
  color: var(--mjr-text-muted);
  font-size: 0.9688rem;
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: 0;
}

.mjr-empty__actions {
  margin-top: 1.5rem;
  justify-content: center;
}

/* A notice explaining that submission is not open yet. */
.mjr-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--mjr-info-bg);
  border: 1px solid var(--mjr-highlight-300);
  border-left: 3px solid var(--mjr-info-fg);
  border-radius: var(--mjr-radius);
  padding: 1.15rem 1.35rem;
}

.mjr-notice--brass {
  background: var(--mjr-gold-100);
  border-color: var(--mjr-gold-300);
  border-left-color: var(--mjr-gold-500);
}

.mjr-notice__icon {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  color: var(--mjr-info-fg);
}

.mjr-notice--brass .mjr-notice__icon {
  color: var(--mjr-gold-600);
}

.mjr-notice__body {
  min-width: 0;
}

.mjr-notice__title {
  font-family: var(--mjr-font-ui);
  font-size: 0.9375rem;
  font-weight: 650;
  margin: 0 0 0.25rem;
  color: var(--mjr-primary-900);
}

.mjr-notice p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--mjr-text-muted);
  line-height: 1.6;
}/* ---------------------------------------------------------------------------
   14. Utilities
   --------------------------------------------------------------------------- */

.mjr-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}.mjr-text-muted {
  color: var(--mjr-text-muted);
}.mjr-mt-2 { margin-top: 1rem; }
.mjr-mt-3 { margin-top: 1.5rem; }
.mjr-mt-4 { margin-top: 2rem; }
.mjr-mt-5 { margin-top: 3rem; }.mjr-mb-3 { margin-bottom: 1.5rem; }
.mjr-mb-4 { margin-bottom: 2rem; }

/* Long unbroken strings (a DOI, a URL) must not widen the page. */
.mjr-break-word {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   15. Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  .mjr-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  /* The section nav collapses into a disclosure under the masthead. The bar
     itself stays; only the list of links is hidden behind the toggle. */
  /* The collapse applies only when journal.js has marked the nav. With
     JavaScript unavailable the list simply stays visible and stacked. */
  .mjr-nav--js .mjr-nav__toggle {
    display: flex;
  }

  .mjr-nav__list {
    flex-direction: column;
    padding-block: 0.5rem;
  }

  .mjr-nav--js .mjr-nav__list {
    display: none;
  }

  .mjr-nav--js .mjr-nav__list.mjr-is-open {
    display: flex;
  }

  .mjr-nav__item {
    border-bottom: 1px solid var(--mjr-rule-on-dark);
  }

  .mjr-nav__item:last-child {
    border-bottom: 0;
  }

  .mjr-nav__link {
    padding: 0.95rem 0;
    justify-content: space-between;
    border-bottom: 0;
  }

  .mjr-nav__link:hover,
  .mjr-nav__link[aria-current="page"] {
    background: transparent;
    color: var(--mjr-gold-300);
  }

  .mjr-nav__panel {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--mjr-gold-500);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
  }

  .mjr-nav__panel a {
    color: var(--mjr-text-on-dark-muted);
    padding: 0.5rem 0;
  }

  .mjr-nav__panel a:hover,
  .mjr-nav__panel a:focus-visible {
    background: transparent;
    color: var(--mjr-gold-300);
  }

  .mjr-nav .mjr-container {
    padding-inline: var(--mjr-gutter);
  }
}

@media (max-width: 860px) {
  .mjr-issue-hero {
    grid-template-columns: 1fr;
  }

  .mjr-cover--large {
    max-width: 16rem;
  }
}

@media (max-width: 640px) {
  .mjr-issue-card {
    grid-template-columns: 1fr;
  }

  .mjr-cover--medium {
    max-width: 11rem;
  }

  .mjr-speclist__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .mjr-grid--pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The card is a grid; below this width the portrait sits above the details
     rather than beside them, so long institution names keep a usable measure. */
  .mjr-profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.25rem;
  }

  .mjr-profile--lead {
    gap: 1.1rem;
  }

  .mjr-profile--lead .mjr-portrait {
    width: 5.5rem;
    height: 5.5rem;
  }

  .mjr-workflow__step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .mjr-workflow__marker {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.8125rem;
  }

  .mjr-workflow__step::before {
    left: 1.25rem;
    top: 2.5rem;
  }

  .mjr-colophon__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 375px and below - the iPhone SE / mini class. */
@media (max-width: 380px) {
  :root {
    --mjr-gutter: 1rem;
  }

  .mjr-btn {
    width: 100%;
  }

  .mjr-btn-row .mjr-btn {
    width: 100%;
  }

  .mjr-badge {
    font-size: 0.625rem;
    padding: 0.35rem 0.55rem;
  }
}

/* ---------------------------------------------------------------------------
   16. Print and reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mjr,
  .mjr *,
  .mjr *::before,
  .mjr *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mjr-btn:hover,
  .mjr-card--hover:hover {
    transform: none;
  }
}

@media print {
  .mjr-nav,
  .mjr-nav__toggle,
  .mjr-search,
  .mjr-colophon,
  .mjr-cta,
  .mjr-skip-link {
    display: none !important;
  }

  .mjr {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .mjr a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }

  .mjr-card,
  .mjr-profile,
  .mjr-phase {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------------
   17. Journal home: current issue table-of-contents preview
   --------------------------------------------------------------------------- */

.mjr-toc-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mjr-rule);
}

.mjr-toc-preview li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--mjr-rule);
}

.mjr-toc-preview a {
  display: block;
  font-family: var(--mjr-font-display);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--mjr-primary-900);
  text-decoration: none;
}

.mjr-toc-preview a:hover {
  color: var(--mjr-primary-700);
  text-decoration: underline;
}

.mjr-toc-preview span {
  display: block;
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  color: var(--mjr-text-muted);
  margin-top: 0.2rem;
}

/* The lockup is an <h1> on the Journal Home and a <span> elsewhere; both must
   look identical, so reset what the h1 would otherwise inherit from the
   heading scale. */
h1.mjr-brand__lockup {
  margin: 0;
  font-size: inherit;
}

/* ---------------------------------------------------------------------------
   18. Section chrome, narrow screens

   The masthead stacks and left-aligns; the section nav collapses behind the
   "Journal menu" toggle. Declared after the main responsive section so it wins
   without needing !important.
   --------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .mjr-masthead__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.15rem;
  }

  .mjr-masthead__aside {
    align-items: stretch;
  }

  .mjr-masthead__facts {
    justify-content: flex-start;
  }

  .mjr-masthead__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mjr-search__input {
    width: auto;
  }

  .mjr-masthead__cta {
    justify-content: center;
  }

  .mjr-nav__list {
    padding-bottom: 0.75rem;
  }

  .mjr-nav__link:first-child {
    padding-left: 0;
  }

  .mjr-nav__panel {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--mjr-gold-500);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0.75rem 0.9rem;
  }

  .mjr-nav__panel a {
    color: var(--mjr-text-on-dark-muted);
    padding: 0.5rem 0;
  }

  .mjr-nav__panel a:hover,
  .mjr-nav__panel a:focus-visible {
    background: transparent;
    color: var(--mjr-gold-300);
  }

  .mjr-colophon__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   19. Breadcrumbs and page head

   Restored after the section-chrome rewrite replaced the old header/footer
   region, which is where these lived.
   --------------------------------------------------------------------------- */

.mjr-breadcrumbs {
  font-family: var(--mjr-font-ui);
  font-size: 0.8125rem;
  color: var(--mjr-text-soft);
  padding-block: 0.9rem;
  background: var(--mjr-bg-sunken);
  border-bottom: 1px solid var(--mjr-rule);
}

.mjr-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mjr-breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

.mjr-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.35rem;
  color: var(--mjr-rule-strong);
}

.mjr-breadcrumbs a {
  color: var(--mjr-text-muted);
  text-decoration: none;
}

.mjr-breadcrumbs a:hover {
  color: var(--mjr-primary-700);
  text-decoration: underline;
}

/* Page head --------------------------------------------------------------- */

.mjr-page-head {
  background: var(--mjr-bg-raised);
  border-bottom: 1px solid var(--mjr-rule);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.mjr-page-head__inner {
  max-width: 52rem;
}

.mjr-page-head__title {
  margin-bottom: 0.65rem;
}

.mjr-page-head__lede {
  color: var(--mjr-text-muted);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.18rem);
  margin-bottom: 0;
  max-width: var(--mjr-measure);
}

/* Archive item meta ------------------------------------------------------- */

.mjr-archive-item__meta {
  margin: 0;
}

/* Keyword chips pick up the turquoise so an article page shows all three
   Mishkath tones — teal-green ground, turquoise signal, gold accent. */
.mjr-keyword {
  border-color: var(--mjr-highlight-300);
  background: var(--mjr-highlight-100);
  color: var(--mjr-highlight-600);
}