/* ==========================================================================
   Caliper Journal Theme for OJS 3.5.x
   plugins/themes/caliper/styles/caliper.css

   A technical-precision scholarly design. The rules of the house:

   - Hairlines, not shadows. Elevation is used once (the issue cover) and
     nowhere else; every other boundary is a 1px rule.
   - Sharp corners. There is no border-radius token because there is no radius.
   - Numbers are monospaced and always read left-to-right, in both scripts.
     .cal-num carries the face; dir="ltr" in the markup carries the direction.
   - Layout uses LOGICAL properties throughout (inline-start/end, margin-inline)
     so the Arabic mirror is the same stylesheet, not a second one.

   Colours are custom properties so the plugin can override the four the
   manager controls without shipping a second copy of anything.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --cal-navy: #12283f;
  --cal-navy-deep: #0c1c2e;
  --cal-navy-mid: #14385c;
  --cal-navy-soft: #8fa3b8;
  --cal-navy-pale: #b9c7d5;
  --cal-navy-tint: #d3dde7;
  --cal-navy-rule: #1c344d;
  --cal-navy-edge: #31465c;
  --cal-navy-line: #3c5470;

  --cal-brass: #a3633c;          /* fill: white on it is 4.76 */
  --cal-brass-ink: #a3633c;      /* brass AS TEXT; swapped lighter in dark */
  --cal-brass-light: #c98a55;
  --cal-brass-deep: #8f5630;
  --cal-brass-pale: #ddc3ac;
  --cal-brass-mist: #e9d8c9;

  /* Surfaces ------------------------------------------------------------- */
  --cal-paper: #faf9f7;
  --cal-card: #ffffff;
  --cal-rule: #e4e0d9;

  /* Ink ------------------------------------------------------------------ */
  --cal-ink: #1d2733;
  --cal-ink-2: #44505d;
  --cal-ink-3: #5f6a77;
  --cal-ink-mute: #697280;
  /* The article reading column runs a shade warmer and heavier than UI ink.
     It is a TOKEN and not a literal because dark mode has to swap it -- as a
     literal it rendered dark grey on the dark canvas. */
  --cal-read: #26313d;

  /* Semantic ------------------------------------------------------------- */
  --cal-access: #2e7d78;
  --cal-tag: #14507a;
  --cal-tag-edge: #b9cfdf;
  --cal-access-edge: #cfe0de;
  --cal-chip-edge: #dfe4e9;
  /* Three of these shipped as hardcoded literals and one was missing
     entirely, so the design's own values were unreachable from the token
     layer -- which is exactly how a stylesheet drifts from the design it
     claims to implement. Found by caliper_design_check.py. */
  --cal-area-hover: #faf6f1;   /* research-area cell hover, from the design */
  --cal-chain-edge: #cdd5dd;   /* peer-review chain step border */
  --cal-foot-body: #71859d;    /* footer contact ink; see the deviation note */
  /* A decorative rule may be faint; the boundary of a FORM CONTROL may not.
     WCAG 1.4.11 wants 3:1 for it, and --cal-rule is 1.3:1. */
  --cal-field-edge: #949089;

  /* Type ----------------------------------------------------------------- */
  --cal-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cal-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --cal-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cal-arabic: "Amiri", "Source Serif 4", Georgia, serif;
  --cal-arabic-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Metrics -------------------------------------------------------------- */
  --cal-base: 16px;
  /* Full width by default: the bands run edge to edge and the gutter grows
     with the viewport instead of the content stopping at a fixed column. Set
     the Content width option to a length (1200px) to box it instead. */
  --cal-wrap: none;
  --cal-gutter: clamp(20px, 3.4vw, 72px);
  --cal-band: clamp(44px, 4.6vw, 88px);
  --cal-hairline: 1px solid var(--cal-rule);
  /* Height of the article action bar. The contents rail clears it by consuming
     the same value, so the two can never drift apart. */
  --cal-stick: 46px;

  color-scheme: light;
  accent-color: var(--cal-navy);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--cal-rule) transparent;
}

body.cal-body {
  margin: 0;
  background: var(--cal-paper);
  color: var(--cal-ink);
  font-family: var(--cal-sans);
  font-size: var(--cal-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic switches the running face and opens the leading; Latin runs inside
   an Arabic page (titles, identifiers) keep their own stack via .cal-num and
   the [dir="ltr"] rule further down. */
body.cal-body:lang(ar),
[dir="rtl"] body.cal-body { font-family: var(--cal-arabic-sans); line-height: 1.9; }

.cal-body a { color: var(--cal-navy-mid); text-decoration: none; }
.cal-body a:hover { color: var(--cal-brass-ink); }
.cal-body a:focus-visible,
.cal-body button:focus-visible,
.cal-body [tabindex]:focus-visible {
  outline: 2px solid var(--cal-brass);
  outline-offset: 2px;
}
.cal-body ::selection { background: var(--cal-brass-mist); }

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

.cal-wrap {
  max-width: var(--cal-wrap);
  margin-inline: auto;
  padding-inline: var(--cal-gutter);
}

/* Monospaced identifiers and counts. Numbers stay left-to-right in Arabic --
   the markup supplies dir="ltr"; this keeps them from inheriting the Arabic
   face and losing their alignment in the process. */
.cal-num {
  font-family: var(--cal-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
[dir="rtl"] .cal-num[dir="ltr"] { text-align: right; }

.pkp_screen_reader {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- buttons -- */

.cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cal-btn--solid { background: var(--cal-brass); color: #fff; }
.cal-btn--solid:hover { background: var(--cal-brass-deep); color: #fff; }
.cal-btn--ghost { border-color: var(--cal-navy-line); color: #e8eef4; background: transparent; }
.cal-btn--ghost:hover { border-color: var(--cal-brass-light); color: var(--cal-brass-light); }

/* A chevron that mirrors with the writing direction. */
.cal-chevron { display: inline-flex; }
[dir="rtl"] .cal-chevron { transform: scaleX(-1); }

/* ====================================================== utility strip ==== */

.cal-util {
  background: var(--cal-navy-deep);
  color: var(--cal-navy-soft);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.cal-util__inner {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  flex-wrap: wrap;
  padding-block: 0.4375rem;
}
.cal-util__left,
.cal-util__right { display: flex; align-items: center; gap: 1.375rem; flex-wrap: wrap; }
.cal-util__right { margin-inline-start: auto; }
.cal-util__fact .cal-num { color: var(--cal-navy-tint); font-size: 0.7188rem; }
.cal-util a { color: var(--cal-navy-tint); }
.cal-util a:hover { color: var(--cal-brass-light); }

.cal-langs { display: inline-flex; align-items: center; gap: 0.75rem; }
.cal-langs + a { position: relative; padding-inline-start: 0.875rem; }
.cal-langs + a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.15em;
  border-inline-start: 1px solid var(--cal-navy-edge);
}

/* ========================================================== masthead ===== */

.cal-masthead { background: var(--cal-card); border-bottom: var(--cal-hairline); }

.cal-masthead__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.125rem 0;
}

.cal-brand { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
.cal-brand:hover { color: inherit; }
.cal-brand__mark { flex: none; color: var(--cal-navy); }
.cal-brand__logo { flex: none; max-height: 56px; width: auto; }
.cal-brand__text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

.cal-brand__title {
  font-family: var(--cal-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cal-navy);
  text-wrap: balance;
}
[dir="rtl"] .cal-brand__title { font-family: var(--cal-arabic); font-size: 1.25rem; }

.cal-brand__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--cal-ink-3);
  text-transform: uppercase;
}
[dir="rtl"] .cal-brand__meta { letter-spacing: normal; text-transform: none; }
.cal-brand__sep { width: 3px; height: 3px; background: var(--cal-ink-mute); }

.cal-masthead__cta { margin-inline-start: auto; flex: none; padding: 0.6875rem 1.375rem; font-size: 0.875rem; }

/* ======================================================== navigation ===== */

.cal-nav { background: var(--cal-card); }
.cal-nav__inner { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

.cal-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cal-navy);
  cursor: pointer;
}
.cal-nav__bars,
.cal-nav__bars::before,
.cal-nav__bars::after {
  display: block; width: 18px; height: 2px;
  background: currentColor;
}
.cal-nav__bars { position: relative; }
.cal-nav__bars::before,
.cal-nav__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.cal-nav__bars::before { top: -6px; }
.cal-nav__bars::after { top: 6px; }

.cal-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-nav__list li { position: relative; }
.cal-nav__list a {
  display: block;
  padding-block: 0.875rem;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cal-ink-2);
}
.cal-nav__list a:hover { color: var(--cal-navy); border-bottom-color: var(--cal-brass-pale); }
/* OJS {load_menu} marks the current page by putting .active on the ANCHOR, not
   on the list item -- that is the hook the brass underline hangs on. The other
   two selectors are belt and braces for menu markup that differs. */
.cal-nav__list a.active,
.cal-nav__list .current > a,
.cal-nav__list [aria-current] { color: var(--cal-navy); font-weight: 600; border-bottom-color: var(--cal-brass-ink); }

/* Second-level menus stay a plain list until JS or hover opens them, so the
   links remain reachable and crawlable with scripting off. */
.cal-nav__list ul {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 40;
  display: none;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--cal-card);
  border: var(--cal-hairline);
}
.cal-nav__list li:hover > ul,
.cal-nav__list li:focus-within > ul { display: block; }
.cal-nav__list ul a { padding: 0.5rem 1rem; border-bottom: 0; }

.cal-nav__search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  padding-block: 0.875rem;
  font-size: 0.875rem;
  color: var(--cal-ink-2);
}
.cal-nav__search:hover { color: var(--cal-navy); }

.cal-nav__user { display: flex; align-items: center; }
.cal-nav__userlist { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.cal-nav__userlist a { color: var(--cal-ink-3); }

/* ============================================================== hero ===== */

.cal-hero {
  position: relative;
  overflow: hidden;
  background: var(--cal-navy);
  color: #fff;
}

/* The drafting grid. Two 1px gradients on a 56px pitch -- cheap, resolution
   independent, and it survives any container width. */
.cal-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 163, 184, 0.08) 1px, transparent 1px);
  /* The lattice scales with the canvas: 56px on the desktop design, 34px on
     the 390px mobile one. Left at 56px a phone shows barely two cells and the
     texture reads as an accident rather than a grid. */
  background-size: 56px 56px;
  pointer-events: none;
}

.cal-hero__watermark {
  position: absolute;
  inset-inline-end: -60px;
  top: 50%;
  translate: 0 -50%;
  width: 520px;
  height: 520px;
  color: var(--cal-brass-light);
  opacity: 0.15;
  pointer-events: none;
}
[dir="rtl"] .cal-hero__watermark { scale: -1 1; }

.cal-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  padding-block: 5.5rem 4.75rem;
}

.cal-hero__eyebrow {
  margin: 0;
  font-size: 0.7813rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cal-brass-light);
}
[dir="rtl"] .cal-hero__eyebrow { letter-spacing: 0.06em; text-transform: none; font-size: 0.8125rem; }

.cal-hero__title {
  margin: 0;
  /* Matched to the canvas measure. A ch-based cap looks equivalent but lands
     around 520px at this size, which wraps a long journal name to four lines. */
  max-width: 820px;
  font-family: var(--cal-serif);
  /* Both ends are the design's own: 24px at the 390px mobile canvas,
     52px at the 1200px desktop one. The previous floor of 2rem rendered
     32px on a phone -- a third larger than the mobile design specifies,
     which on a 390px screen costs a whole line of the journal name. */
  font-size: clamp(1.5rem, 0.6574rem + 3.4568vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
[dir="rtl"] .cal-hero__title { font-family: var(--cal-arabic); line-height: 1.35; letter-spacing: normal; }

.cal-hero__lede {
  margin: 0;
  max-width: 62ch;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--cal-navy-pale);
  text-wrap: pretty;
}
[dir="rtl"] .cal-hero__lede { line-height: 1.9; }

.cal-hero__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8438rem;
  color: var(--cal-navy-soft);
}
.cal-hero__facts li { display: flex; align-items: center; gap: 1.25rem; }
.cal-hero__facts li + li::before {
  content: "";
  width: 3px; height: 3px;
  background: var(--cal-navy-edge);
}

.cal-hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 0.5rem; }
.cal-hero__actions .cal-btn { padding: 0.875rem 1.75rem; font-size: 0.9375rem; }

/* ================================================= credential strip ====== */

.cal-cred { background: var(--cal-card); border-bottom: var(--cal-hairline); }

.cal-cred__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding-block: 1.625rem;
}

.cal-cred__cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-inline: 1.5rem;
  border-inline-start: var(--cal-hairline);
}
.cal-cred__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }

.cal-cred__value { font-size: 1.1875rem; font-weight: 600; color: var(--cal-navy); }
.cal-cred__value.cal-num { font-weight: 500; }
.cal-cred__value--access { color: var(--cal-access); }
.cal-cred__label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-cred__label { letter-spacing: normal; text-transform: none; font-size: 0.7813rem; }

/* ==================================================== announcements ====== */

.cal-anns { padding-block: 1.75rem 0; }
.cal-anns__title {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-anns__title { letter-spacing: normal; text-transform: none; }
.cal-anns__list { margin: 0; padding: 0; list-style: none; border-top: var(--cal-hairline); }
.cal-anns__list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: var(--cal-hairline);
}
.cal-anns__date { flex: none; font-size: 0.75rem; color: var(--cal-ink-mute); }

/* =============================================== section headings ======== */

.cal-sechead {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2.25rem;
}
.cal-sechead h2 {
  margin: 0;
  font-family: var(--cal-serif);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-sechead h2 { font-family: var(--cal-arabic); font-size: 2rem; }
.cal-sechead__rule { flex: 1; height: 1px; background: var(--cal-rule); }
.cal-sechead__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cal-brass-ink);
}
.cal-sechead__more:hover { color: var(--cal-brass-deep); }

/* ==================================================== current issue ====== */

.cal-issue { padding-block: var(--cal-band) 4rem; }

.cal-folio {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 3.4vw, 4rem);
  align-items: start;
}

.cal-folio__aside { display: flex; flex-direction: column; gap: 1rem; }

/* min-width:0 is load-bearing, not tidiness. A grid item defaults to
   min-width:auto, so one long article title or DOI would push this column past
   its track and scroll the whole page sideways. */
.cal-folio__toc { min-width: 0; }

.cal-cover {
  position: relative;
  display: block;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: var(--cal-navy);
  /* The one deliberate shadow in the design: a printed object on a desk. */
  box-shadow: 0 8px 28px rgba(18, 40, 63, 0.22);
}
.cal-cover--image img { width: 100%; height: 100%; object-fit: cover; }

.cal-cover--drawn {
  display: flex;
  flex-direction: column;
  padding: 1.375rem;
  color: #fff;
}
.cal-cover__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 163, 184, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
}
.cal-cover--drawn > *:not(.cal-cover__grid) { position: relative; }
.cal-cover__issn { font-size: 0.625rem; letter-spacing: 0.1em; color: var(--cal-navy-soft); }
.cal-cover__abbr {
  margin-top: 0.875rem;
  font-family: var(--cal-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}
[dir="rtl"] .cal-cover__abbr { font-family: var(--cal-arabic); }
.cal-cover__name { margin-top: 0.375rem; font-size: 0.6563rem; line-height: 1.5; color: var(--cal-navy-pale); }
.cal-cover__mark {
  width: 72px; height: 72px;
  margin-top: auto;
  align-self: flex-end;
  color: var(--cal-brass-light);
  opacity: 0.65;
}
[dir="rtl"] .cal-cover__mark { align-self: flex-start; }
.cal-cover__vol { margin-top: 0.625rem; font-size: 0.6875rem; color: var(--cal-brass-light); }

.cal-folio__ident { display: flex; flex-direction: column; gap: 0.3125rem; }
.cal-folio__title { font-size: 0.9375rem; font-weight: 600; color: var(--cal-navy); }
.cal-folio__date { font-size: 0.8125rem; color: var(--cal-ink-3); }

.cal-folio__toclabel {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-folio__toclabel { letter-spacing: normal; text-transform: none; }

/* ================================================== the article row ====== */

.cal-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.375rem;
  border-bottom: var(--cal-hairline);
}
.cal-row:last-child { border-bottom: 0; }

.cal-row__top { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.cal-badge {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--cal-tag-edge);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cal-tag);
}
[dir="rtl"] .cal-badge { letter-spacing: normal; text-transform: none; font-size: 0.7188rem; }

.cal-row__date { font-size: 0.7813rem; color: var(--cal-ink-mute); }

.cal-row__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.cal-row__title a {
  font-family: var(--cal-serif);
  color: var(--cal-navy);
  text-wrap: pretty;
}
.cal-row__title a:hover { color: var(--cal-brass-ink); }
/* A Latin title inside an Arabic page keeps the Latin face and its own
   direction, but stays aligned to the Arabic column edge. */
[dir="rtl"] .cal-row__title a { font-family: var(--cal-serif); }
.cal-row__subtitle { display: block; font-weight: 400; font-size: 0.9em; color: var(--cal-ink-2); }

.cal-row__authors { font-size: 0.8438rem; color: var(--cal-ink-2); }

.cal-row__abstract {
  margin: 0;
  /* A measure, not a box width. Without it the two-line clamp would cut after
     a handful of words on a wide screen and after a paragraph on a narrow one. */
  max-width: 92ch;
  font-size: 0.8438rem;
  line-height: 1.6;
  color: var(--cal-ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cal-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.125rem;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
}
.cal-row__doi,
.cal-row__pages { font-size: 0.75rem; color: var(--cal-ink-mute); }
.cal-row__doi:hover { color: var(--cal-brass-ink); }

.cal-row__read {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--cal-brass-ink);
}
.cal-row__read:hover { color: var(--cal-brass-deep); }

/* Galley links inherited from the core template. */
.cal-row .obj_galley_link,
.cal-row .galley_link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-row .obj_galley_link:hover,
.cal-row .galley_link:hover { color: var(--cal-brass-ink); }

.cal-empty { margin: 0; padding-block: 2rem; color: var(--cal-ink-3); }

/* =================================================== research areas ====== */

.cal-areas {
  padding-block: var(--cal-band);
  background: var(--cal-card);
  border-block: var(--cal-hairline);
}
.cal-areas__intro {
  margin: -1.25rem 0 2rem;
  max-width: 68ch;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--cal-ink-3);
}

/* One hairline grid drawn with a background and 1px gaps, so every cell shares
   its rules with its neighbours instead of doubling them. */
.cal-areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cal-rule);
  border: var(--cal-hairline);
}
.cal-areas__cell { background: var(--cal-card); }
.cal-areas__cell > a,
.cal-areas__cell > span:only-child {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 1.25rem 1.375rem;
}
.cal-areas__cell > a:hover { background: var(--cal-area-hover); }
.cal-areas__cell > a:hover .cal-areas__label { color: var(--cal-brass-ink); }
.cal-areas__n { font-size: 0.6875rem; color: var(--cal-brass-ink); }
.cal-areas__label { font-size: 0.9063rem; font-weight: 600; color: var(--cal-navy); }

/* ============================ peer review chain + journal usage band ===== */

.cal-band { padding-block: var(--cal-band); }
.cal-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: start;
}

/* Same reason as .cal-folio__toc: the chain and the indexing chips are wide,
   and auto min-width would let them widen the track instead of wrapping. */
.cal-band__main { min-width: 0; }

.cal-band__title {
  margin: 0 0 0.625rem;
  font-family: var(--cal-serif);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-band__title { font-family: var(--cal-arabic); }

.cal-band__intro {
  margin: 0 0 1.75rem;
  max-width: 78ch;
  font-size: 0.9063rem;
  line-height: 1.65;
  color: var(--cal-ink-3);
  text-wrap: pretty;
}

.cal-band__sub {
  margin: 2.25rem 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-band__sub { letter-spacing: normal; text-transform: none; }

/* The chain. Separators are drawn with a border on a pseudo-element rather
   than an arrow character, and they mirror with the writing direction. */
.cal-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cal-chain;
}
.cal-chain__step {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--cal-chain-edge);
  background: var(--cal-card);
  font-size: 0.7813rem;
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-chain__step--strong { background: var(--cal-navy); border-color: var(--cal-navy); color: #fff; }
.cal-chain__step:last-child { border-color: var(--cal-brass-pale); color: var(--cal-brass-ink); }
.cal-chain__step:last-child.cal-chain__step--strong { color: #fff; }

.cal-chain__step + .cal-chain__step { margin-inline-start: 1.5rem; position: relative; }
.cal-chain__step + .cal-chain__step::before {
  content: "";
  position: absolute;
  inset-inline-start: -1rem;
  top: 50%;
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--cal-brass);
  border-inline-end: 1.5px solid var(--cal-brass);
  rotate: 45deg;
  translate: 0 -50%;
}
[dir="rtl"] .cal-chain__step + .cal-chain__step::before { rotate: -135deg; }

.cal-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-index li {
  padding: 0.5625rem 1rem;
  border: var(--cal-hairline);
  background: var(--cal-card);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-index a { color: inherit; }
.cal-index li:hover { border-color: var(--cal-brass-ink); }

.cal-band__rail {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  padding-inline-start: 3rem;
  border-inline-start: var(--cal-hairline);
}

.cal-usage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
}
.cal-usage__cell { display: flex; flex-direction: column-reverse; gap: 0.1875rem; }
.cal-usage dt {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-usage dt { letter-spacing: normal; text-transform: none; }
.cal-usage dd {
  margin: 0;
  font-family: var(--cal-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--cal-navy);
}

.cal-keywords { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cal-keywords a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--cal-chip-edge);
  background: var(--cal-card);
  font-size: 0.7813rem;
  color: var(--cal-ink-2);
}
.cal-keywords a:hover { border-color: var(--cal-brass-ink); color: var(--cal-brass-ink); }

/* ============================================================ footer ===== */

.cal-extra { padding-block: 0 var(--cal-band); }

.cal-foot {
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
  padding-top: 3.5rem;
  background: var(--cal-navy-deep);
  color: var(--cal-navy-soft);
  font-size: 0.8438rem;
}
.cal-foot__watermark {
  position: absolute;
  inset-inline-end: -40px;
  bottom: -90px;
  width: 380px; height: 380px;
  color: var(--cal-brass-light);
  opacity: 0.1;
  pointer-events: none;
}
[dir="rtl"] .cal-foot__watermark { scale: -1 1; }

.cal-foot__cols {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(2rem, 3vw, 4rem);
}

.cal-foot__identity { display: flex; flex-direction: column; gap: 0.875rem; }
.cal-foot__brand { display: flex; align-items: center; gap: 0.75rem; }
.cal-foot__mark { flex: none; color: var(--cal-brass-light); }
.cal-foot__name {
  font-family: var(--cal-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  color: #fff;
}
[dir="rtl"] .cal-foot__name { font-family: var(--cal-arabic); font-size: 1.25rem; }

.cal-foot__blurb { margin: 0; max-width: 22rem; line-height: 1.65; }
.cal-foot__contact { margin: 0; line-height: 1.7; color: var(--cal-foot-body); font-size: 0.8125rem; }
.cal-foot__mail { color: var(--cal-brass-light); }
.cal-foot__mail:hover { color: #e0ab77; }

.cal-foot__col { display: flex; flex-direction: column; gap: 0.75rem; }
.cal-foot__coltitle {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-navy-tint);
}
[dir="rtl"] .cal-foot__coltitle { letter-spacing: normal; text-transform: none; font-size: 0.7813rem; }
.cal-foot__links { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.cal-foot__links a { color: var(--cal-navy-soft); font-size: 0.8438rem; }
.cal-foot__links a:hover { color: var(--cal-brass-light); }

.cal-foot__custom { position: relative; margin-top: 2rem; }

.cal-foot__bottom {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.375rem;
  margin-top: 2.5rem;
  padding-block: 1.125rem;
  border-top: 1px solid var(--cal-navy-rule);
  font-size: 0.75rem;
}
.cal-foot__spacer { flex: 1; }
.cal-foot__access { display: inline-flex; align-items: center; gap: 0.5rem; }
.cal-chip {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--cal-navy-line);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cal-navy-tint);
}
.cal-foot__pkp img { max-height: 28px; width: auto; opacity: 0.75; }
.cal-foot__pkp:hover img { opacity: 1; }

/* =========================================================== article ===== */
/* The article page runs its own layout: two full-bleed bands above a
   contents-rail-plus-reading-column grid. The reading column is capped at a
   measure rather than a fraction of the viewport, which is what keeps a
   full-width theme readable across a long paper. */

.cal-masthead--compact .cal-masthead__inner { padding-block: 0.75rem; }
.cal-masthead--compact .cal-brand__mark { width: 38px; height: 38px; }
.cal-masthead--compact .cal-brand__title { font-size: 1rem; }
.cal-masthead--compact .cal-brand__meta { font-size: 0.6875rem; }

.cal-arthead { background: var(--cal-card); border-bottom: var(--cal-hairline); }
.cal-arthead__inner { padding-block: 2.25rem; }

.cal-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.375rem;
  font-size: 0.7813rem;
  color: var(--cal-ink-mute);
}
.cal-crumbs a { color: var(--cal-ink-3); }
.cal-crumbs a:hover { color: var(--cal-brass-ink); }
.cal-crumbs__current { color: var(--cal-ink-2); }
/* A drawn separator rather than a slash character, so it mirrors with the
   writing direction and stays clear of the glyph ban. */
.cal-crumbs__sep { width: 1px; height: 0.75em; background: var(--cal-rule); rotate: 20deg; }
[dir="rtl"] .cal-crumbs__sep { rotate: -20deg; }

.cal-arthead__badge { margin: 0; }

.cal-arthead__title {
  margin: 1.125rem 0 0;
  max-width: 46ch;
  font-family: var(--cal-serif);
  /* 23px at the 390px mobile canvas, 34px at desktop -- both from the design.
     The old floor of 1.625rem gave 26px on a phone, which pushed a long
     engineering title past the fold before the abstract was reached. */
  font-size: clamp(1.4375rem, 1.1065rem + 1.358vw, 2.125rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cal-navy);
  text-wrap: balance;
}
[dir="rtl"] .cal-arthead__title { font-family: var(--cal-arabic); line-height: 1.45; letter-spacing: normal; }
.cal-arthead__subtitle {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--cal-ink-2);
}

.cal-authors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.625rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.cal-authors__name {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-authors__orcid { display: inline-flex; }
.cal-authors__orcid img,
.cal-authors__orcid svg { width: 14px; height: 14px; }

.cal-affils { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--cal-ink-3); }
.cal-affil { display: inline; }
.cal-affil + .cal-affil::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin: 0 0.5rem;
  vertical-align: middle;
  background: var(--cal-ink-mute);
}

.cal-record {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem 1.375rem;
  margin: 1.25rem 0 0;
  font-size: 0.7813rem;
  color: var(--cal-ink-3);
}
.cal-record__item { display: inline-flex; align-items: baseline; gap: 0.4375rem; }
.cal-record dt { font-weight: 400; }
.cal-record dd { margin: 0; font-weight: 500; color: var(--cal-ink); }
.cal-record dd a { color: var(--cal-navy-mid); }
.cal-record dd a:hover { color: var(--cal-brass-ink); }
.cal-record__item--access { margin-inline-start: auto; }

.cal-access {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--cal-access-edge);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cal-access);
}
[dir="rtl"] .cal-access { letter-spacing: normal; text-transform: none; font-size: 0.7188rem; }

/* The action bar. Sticky, so the galley stays reachable through a long paper. */
.cal-artbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cal-navy);
  color: #fff;
}
.cal-artbar__inner {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--cal-stick);
}
.cal-artbar__title {
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7813rem;
  color: var(--cal-navy-soft);
}
.cal-artbar__spacer { flex: 1; }
.cal-artbar__link {
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cal-navy-tint);
  cursor: pointer;
}
.cal-artbar__link:hover { color: var(--cal-brass-light); }
/* The galley link is the primary action here, so it wears the brass. */
.cal-artbar .obj_galley_link,
.cal-artbar .galley_link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: 0;
  background: var(--cal-brass);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: normal;
  color: #fff;
}
.cal-artbar .obj_galley_link:hover,
.cal-artbar .galley_link:hover { background: var(--cal-brass-light); color: #fff; }

.cal-artbody {
  display: grid;
  grid-template-columns: 220px minmax(0, 74ch);
  gap: clamp(2rem, 4vw, 4rem);
  justify-content: center;
  padding-block: 3rem 5rem;
  align-items: start;
}

/* [hidden] is a UA display:none, and ANY display declaration on a class beats
   it. Without the guard below the rail would sit visible-but-empty with
   scripting off, and permanently visible on the fewer-than-two-headings path
   where the script returns early. */
.cal-contents[hidden] { display: none; }
.cal-contents {
  position: sticky;
  top: calc(var(--cal-stick) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-self: start;
}
.cal-contents__label {
  margin-bottom: 0.625rem;
  font-size: 0.7188rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-contents__label { letter-spacing: normal; text-transform: none; }
.cal-contents__list { margin: 0; padding: 0; list-style: none; }
.cal-contents__list a {
  display: block;
  padding: 0.375rem 0.75rem;
  border-inline-start: 2px solid var(--cal-rule);
  font-size: 0.8125rem;
  color: var(--cal-ink-3);
}
.cal-contents__list a:hover { border-inline-start-color: var(--cal-brass-light); color: var(--cal-navy); }
.cal-contents__list a.cal-contents__link--current {
  border-inline-start-color: var(--cal-brass-ink);
  color: var(--cal-navy);
  font-weight: 600;
}

.cal-artmain {
  min-width: 0;
  font-family: var(--cal-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--cal-read);
}
/* 2.05, the Design System's stated Arabic reading measure -- the extra
   leading is what accommodates tashkeel and the dots below the baseline.
   Shipped at 1.95 until the spec was read line by line. */
[dir="rtl"] .cal-artmain { font-family: var(--cal-arabic-sans); line-height: 2.05; }

.cal-abstract {
  padding: 1.75rem 2rem;
  border: var(--cal-hairline);
  background: var(--cal-card);
}
.cal-abstract__label,
.cal-artkw__label {
  margin: 0 0 0.75rem;
  font-family: var(--cal-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-abstract__label,
[dir="rtl"] .cal-artkw__label { letter-spacing: normal; text-transform: none; }

.cal-artkw { margin-top: 0.75rem; font-family: var(--cal-sans); }
.cal-artkw__label { display: inline-block; margin-inline-end: 0.75rem; margin-bottom: 0; vertical-align: middle; }
.cal-artkw .cal-keywords { display: inline-flex; vertical-align: middle; }

/* The scoping root for the whole article page: it carries the print break
   behaviour and gives plugins a single stable hook to hang styling on. */
.cal-article { display: block; }

/* A notice that changes how the page should be read -- a preview, or an
   outdated version -- sits above the header band, not inside the article. */
.cal-artnotice { padding-top: 1.5rem; background: var(--cal-card); }
.cal-artnotice .cal-note { margin: 0; }

/* Both sections are apparatus about the record rather than the record itself,
   so they carry the same subdued weight as the licence and references. */
.cal-versions,
.cal-bios { font-family: var(--cal-sans); }

.cal-versions__list {
  margin: 0;
  padding-inline-start: 1.375rem;
  font-family: var(--cal-sans);
  font-size: 0.875rem;
  color: var(--cal-ink-2);
}
.cal-versions__list li { margin-bottom: 0.4375rem; }
.cal-versions__current { font-weight: 600; color: var(--cal-navy); }

.cal-bio { margin-bottom: 1.75rem; }
.cal-bio:last-child { margin-bottom: 0; }
.cal-bio__name {
  margin: 0 0 0.375rem;
  font-family: var(--cal-sans);
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-bio__text { font-family: var(--cal-sans); font-size: 0.9063rem; color: var(--cal-ink-2); }

.cal-artsec { margin-top: 2.5rem; }
/* The licence and the references are apparatus rather than argument, so both
   sit below a rule and step down in weight from the article proper. */
.cal-artsec--licence,
.cal-references { padding-top: 2rem; border-top: var(--cal-hairline); }
.cal-artsec--licence { font-family: var(--cal-sans); font-size: 0.875rem; color: var(--cal-ink-3); }
.cal-artsec h2,
.cal-artmain h2 {
  margin: 0 0 1rem;
  font-family: var(--cal-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-artsec h2,
[dir="rtl"] .cal-artmain h2 { font-family: var(--cal-arabic); }
.cal-artmain h3 { font-family: var(--cal-serif); font-size: 1.1875rem; font-weight: 700; color: var(--cal-navy); }

/* Whatever the galley or a plugin puts in the reading column: tables get the
   navy header and hairline rules the rest of the theme uses, figures get a
   captioned frame. */
.cal-artmain table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-family: var(--cal-sans);
  font-size: 0.8438rem;
  background: var(--cal-card);
}
.cal-artmain thead th { padding: 0.625rem 0.875rem; background: var(--cal-navy); color: #fff; font-weight: 600; text-align: start; }
.cal-artmain tbody td { padding: 0.625rem 0.875rem; border-bottom: var(--cal-hairline); }
.cal-artmain tbody tr:nth-child(even) { background: var(--cal-paper); }

.cal-artmain figure { margin: 1.75rem 0; font-family: var(--cal-sans); }
.cal-artmain figcaption { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--cal-ink-3); }
.cal-artmain img { border: var(--cal-hairline); background: var(--cal-card); }

.cal-galleys { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; padding: 0; list-style: none; font-family: var(--cal-sans); }

.cal-licence__terms { font-family: var(--cal-sans); font-size: 0.875rem; }
.cal-licence__badge img { border: 0; }

.cal-references__list {
  margin: 0;
  padding-inline-start: 1.375rem;
  font-family: var(--cal-sans);
  font-size: 0.8438rem;
  line-height: 1.65;
  color: var(--cal-ink-2);
}
.cal-references__list li { margin-bottom: 0.875rem; }
.cal-references__raw { font-family: var(--cal-sans); font-size: 0.8438rem; line-height: 1.65; color: var(--cal-ink-2); }

@media (max-width: 1000px) {
  .cal-artbody { grid-template-columns: minmax(0, 1fr); }
  /* The rail becomes a strip above the article rather than a column beside it;
     sticky positioning there would cover the text it indexes. */
  .cal-contents { position: static; }
  .cal-contents__list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .cal-contents__list a { border-inline-start: 0; border-bottom: 2px solid var(--cal-rule); }
  .cal-contents__list a.cal-contents__link--current { border-bottom-color: var(--cal-brass-ink); }
}

@media (max-width: 760px) {
  .cal-artbar__title { display: none; }
  .cal-abstract { padding: 1.25rem; }
  .cal-artbody { padding-block: 2rem 3rem; }
}

@media print {
  .cal-artbar,
  .cal-contents,
  .cal-crumbs { display: none !important; }
  .cal-artbody { display: block; padding: 0; }
  .cal-abstract { border: 1px solid #000; }
  .cal-artsec { break-inside: avoid; }
}

/* ============================================ issue and archive ========== */
/* The archive is where the homepage's "view all issues" link lands, so it uses
   the same cover treatment the folio does. Covers are the content here: the
   grid gives them room and says only what is needed to pick one. */

.cal-pagehead { padding-block: 3rem 1rem; }
.cal-pagehead h1 {
  margin: 0;
  font-family: var(--cal-serif);
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.125rem);
  font-weight: 700;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-pagehead h1 { font-family: var(--cal-arabic); }

.cal-issuepage { padding-block: 3rem 5rem; }

/* Sits under the cover on the issue page, so it stays narrow and quiet. */
.cal-folio__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cal-ink-3);
}
.cal-folio__galleys { display: flex; flex-direction: column; gap: 0.625rem; }

/* A section heading inside a table of contents, shown only when the issue has
   more than one section. */
.cal-tocsec {
  margin: 2rem 0 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cal-brass);
  font-family: var(--cal-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-tocsec { letter-spacing: normal; text-transform: none; font-size: 0.875rem; }
.cal-tocsec:first-child { margin-top: 0; }

.cal-archive { padding-block: 3rem 5rem; }

.cal-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-archive__cell { min-width: 0; }

.cal-issuecard { display: flex; flex-direction: column; gap: 0.875rem; }
/* The archive's covers are browsing targets rather than a single printed
   object on a desk, so they drop the folio's shadow for a hairline. */
.cal-issuecard .cal-cover {
  box-shadow: none;
  outline: 1px solid var(--cal-rule);
  outline-offset: -1px;
  transition: outline-color 0.16s ease;
}
.cal-issuecard:hover .cal-cover { outline-color: var(--cal-brass-ink); }

.cal-issuecard__meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cal-issuecard__title { font-size: 0.9063rem; font-weight: 600; color: var(--cal-navy); text-wrap: pretty; }
.cal-issuecard__title:hover { color: var(--cal-brass-ink); }
.cal-issuecard__series { font-size: 0.8125rem; color: var(--cal-ink-3); }
.cal-issuecard__date { font-family: var(--cal-mono); font-size: 0.75rem; color: var(--cal-ink-mute); }

/* Core's pagination component, brought into the theme's language. */
.cal-archive .cmp_pagination {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: var(--cal-hairline);
  font-size: 0.8125rem;
  color: var(--cal-ink-3);
}
.cal-archive .cmp_pagination a {
  padding: 0.5rem 0.875rem;
  border: var(--cal-hairline);
  background: var(--cal-card);
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-archive .cmp_pagination a:hover { border-color: var(--cal-brass-ink); color: var(--cal-brass-ink); }

@media (max-width: 760px) {
  .cal-archive__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .cal-archive,
  .cal-issuepage { padding-block: 2rem 3rem; }
}

/* ================================================ shared page shell ====== */
/* Every page below the four bespoke ones shares this: the header band already
   defined above, then a measured column. Prose is capped at a reading measure
   independently of the container, for the same reason the article body is. */

.cal-page { padding-block: 2.75rem 4.5rem; }
.cal-page__body,
.cal-page__intro { max-width: 78ch; }
.cal-page__intro { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.7; color: var(--cal-ink-2); }
.cal-page__note { margin: 2.5rem 0 0; max-width: 78ch; font-size: 0.875rem; color: var(--cal-ink-3); }
.cal-page__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }

/* The prose column: journal-authored HTML, so it has to survive whatever the
   editor emitted rather than assume a shape. */
.cal-prose { line-height: 1.75; }
.cal-prose > :first-child { margin-top: 0; }
.cal-prose > :last-child { margin-bottom: 0; }
.cal-prose p,
.cal-prose ul,
.cal-prose ol { margin: 0 0 1.125rem; }
.cal-prose h2,
.cal-prose h3,
.cal-prose h4 {
  margin: 2rem 0 0.75rem;
  font-family: var(--cal-serif);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-prose h2,
[dir="rtl"] .cal-prose h3,
[dir="rtl"] .cal-prose h4 { font-family: var(--cal-arabic); }
.cal-prose h2 { font-size: 1.375rem; }
.cal-prose h3 { font-size: 1.125rem; }
.cal-prose h4 { font-size: 1rem; }
.cal-prose a { color: var(--cal-navy-mid); text-decoration: underline; text-underline-offset: 2px; }
.cal-prose a:hover { color: var(--cal-brass-ink); }
.cal-prose blockquote {
  margin: 1.5rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--cal-brass);
  color: var(--cal-ink-2);
}
.cal-prose code,
.cal-prose pre { font-family: var(--cal-mono); font-size: 0.875em; }
.cal-prose pre { padding: 1rem; border: var(--cal-hairline); background: var(--cal-card); overflow-x: auto; }
.cal-prose hr { margin: 2rem 0; border: 0; border-top: var(--cal-hairline); }

.cal-btn--quiet { border-color: var(--cal-rule); background: var(--cal-card); color: var(--cal-navy); }
.cal-btn--quiet:hover { border-color: var(--cal-brass-ink); color: var(--cal-brass-ink); }

.cal-chevron--back { /* mirrored by the shared [dir=rtl] .cal-chevron rule */ }

/* ==================================================== notifications ====== */

.cal-note {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: var(--cal-hairline);
  border-inline-start: 3px solid var(--cal-ink-mute);
  background: var(--cal-card);
  font-size: 0.9063rem;
}
.cal-note__mark { flex: none; width: 3px; align-self: stretch; background: transparent; }
.cal-note__body > :first-child { margin-top: 0; }
.cal-note__body > :last-child { margin-bottom: 0; }
.cal-note--warning { border-inline-start-color: var(--cal-brass-ink); }
.cal-note--error { border-inline-start-color: #a4343a; }
.cal-note--success { border-inline-start-color: var(--cal-access); }
.cal-note--notice { border-inline-start-color: var(--cal-navy-mid); }

/* ====================================================== pagination ======= */

.cal-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: var(--cal-hairline);
  font-size: 0.8125rem;
}
.cal-pager__count { color: var(--cal-ink-3); }
.cal-pager__step {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.875rem;
  border: var(--cal-hairline);
  background: var(--cal-card);
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-pager__step:hover { border-color: var(--cal-brass-ink); color: var(--cal-brass-ink); }
/* page_links emits bare anchors; give them the same treatment. */
.cal-pager a:not(.cal-pager__step) {
  padding: 0.375rem 0.625rem;
  border: var(--cal-hairline);
  background: var(--cal-card);
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-pager a:not(.cal-pager__step):hover { border-color: var(--cal-brass-ink); color: var(--cal-brass-ink); }

/* ========================================================== galleys ====== */

.cal-galley {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--cal-navy);
  border-radius: 0;
  background: transparent;
  font-family: var(--cal-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--cal-navy);
}
.cal-galley:hover { background: var(--cal-navy); color: #fff; }
.cal-galley__mark { display: inline-flex; }
.cal-galley__label { white-space: nowrap; }
.cal-galley--restricted { border-color: var(--cal-ink-mute); color: var(--cal-ink-3); }
.cal-galley--restricted:hover { background: var(--cal-ink-3); color: #fff; }
.cal-galley__price { font-size: 0.6875rem; opacity: 0.85; }

/* ======================================================= highlights ====== */

.cal-highlights { padding-block: 2.5rem 0; }
.cal-highlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cal-rule);
  border: var(--cal-hairline);
}
.cal-highlights__cell { display: flex; flex-direction: column; background: var(--cal-card); }
/* A cell with artwork leads with it, so its text block loses the top padding
   the image already provides. */
.cal-highlights__cell--image .cal-highlights__body { padding-top: 1.25rem; }
.cal-highlights__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cal-highlights__body { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem; }
.cal-highlights__title {
  margin: 0;
  font-family: var(--cal-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-highlights__title { font-family: var(--cal-arabic); }
.cal-highlights__desc { font-size: 0.875rem; color: var(--cal-ink-3); }
.cal-highlights__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cal-brass-ink);
}
.cal-highlights__link:hover { color: var(--cal-brass-deep); }

/* ==================================================== announcements ====== */

.cal-annlist-block { padding-block: 3rem 0; }
.cal-annlist { border-top: var(--cal-hairline); }
/* The site index shows one announcement in full and reduces the rest to a
   title and a date, so the brief ones lose the vertical room the full one
   needs. */
.cal-ann--brief { padding-block: 0.875rem; }
.cal-ann--brief .cal-ann__body { flex-direction: row; align-items: baseline; gap: 1rem; }
.cal-ann--brief .cal-ann__title { font-size: 0.9375rem; }
.cal-ann {
  display: flex;
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-bottom: var(--cal-hairline);
}
/* With a figure the row becomes two columns; without one the body simply
   fills the width, which is why the modifier exists. */
.cal-ann--image .cal-ann__body { padding-top: 0.125rem; }
.cal-ann__figure { flex: none; width: 180px; }
.cal-ann__figure img { width: 100%; height: auto; border: var(--cal-hairline); }
.cal-ann__body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.cal-ann__date { font-size: 0.75rem; color: var(--cal-ink-mute); }
.cal-ann__title { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }
.cal-ann__title a { font-family: var(--cal-serif); color: var(--cal-navy); }
[dir="rtl"] .cal-ann__title a { font-family: var(--cal-arabic); }
.cal-ann__title a:hover { color: var(--cal-brass-ink); }
.cal-ann__summary { max-width: 78ch; font-size: 0.9063rem; color: var(--cal-ink-3); }
.cal-ann__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cal-brass-ink);
}
.cal-ann__more:hover { color: var(--cal-brass-deep); }

/* =========================================================== search ====== */

.cal-search { padding-block: 2.5rem 4.5rem; }

.cal-searchform {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  border: var(--cal-hairline);
  background: var(--cal-card);
}
.cal-searchform__main { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cal-searchform__query { flex: 1 1 18rem; min-width: 0; }
.cal-searchform__adv { margin-top: 1rem; }
.cal-searchform__adv summary {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cal-navy);
  cursor: pointer;
}
.cal-searchform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.125rem;
  margin-top: 1.125rem;
  padding-top: 1.125rem;
  border-top: var(--cal-hairline);
}
.cal-searchform__field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.cal-searchform__label,
.cal-searchform__field legend {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-searchform__label,
[dir="rtl"] .cal-searchform__field legend { letter-spacing: normal; text-transform: none; }
/* The accessible date selects arrive as a fieldset of three; keep them on one
   line rather than stacked. */
.cal-searchform__field--dates fieldset { margin: 0; padding: 0; border: 0; }
.cal-searchform__field--dates select { margin-inline-end: 0.375rem; }

.cal-search__count { margin: 0 0 1rem; font-size: 0.8125rem; color: var(--cal-ink-3); }
.cal-search__results { border-top: var(--cal-hairline); }

/* ========================================================= contact ======= */

.cal-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--cal-rule);
  border: var(--cal-hairline);
}
.cal-contact__card { padding: 1.5rem; background: var(--cal-card); }
.cal-contact__label {
  margin: 0 0 1rem;
  font-family: var(--cal-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-contact__label { letter-spacing: normal; text-transform: none; font-size: 0.8125rem; }
.cal-contact__address { font-size: 0.9063rem; line-height: 1.7; color: var(--cal-ink-2); }
.cal-contact__list { margin: 0; }
.cal-contact__row { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 0.875rem; }
.cal-contact__row:last-child { margin-bottom: 0; }
.cal-contact__row dt { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cal-ink-mute); }
[dir="rtl"] .cal-contact__row dt { letter-spacing: normal; text-transform: none; font-size: 0.75rem; }
.cal-contact__row dd { margin: 0; font-size: 0.9063rem; color: var(--cal-ink); }
.cal-contact__mail a { color: var(--cal-navy-mid); }
.cal-contact__mail a:hover { color: var(--cal-brass-ink); }

/* ==================================================== people (board) ===== */

.cal-board { margin-bottom: 3rem; }
.cal-board__role {
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cal-brass);
  font-family: var(--cal-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-board__role { letter-spacing: normal; text-transform: none; font-size: 0.9063rem; }
/* The reviewer roll is an acknowledgement rather than a masthead, so it sits
   apart from the boards above it. */
.cal-board--reviewers { margin-top: 3.5rem; padding-top: 2.5rem; border-top: var(--cal-hairline); }
.cal-board__note { margin: -0.75rem 0 1.25rem; max-width: 78ch; font-size: 0.875rem; color: var(--cal-ink-3); }
.cal-board__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The reviewer acknowledgement is a long roll of names with no dates, so it
   packs tighter than a board of editors. */
.cal-board__list--dense { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem 1.5rem; }

.cal-person { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.cal-person__since { font-size: 0.6875rem; color: var(--cal-ink-mute); }
.cal-person__name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--cal-navy);
}
.cal-person__orcid { display: inline-flex; }
.cal-person__orcid img,
.cal-person__orcid svg { width: 14px; height: 14px; }
.cal-person__affil { font-size: 0.8125rem; color: var(--cal-ink-3); }

/* ======================================================== category ======= */

.cal-category { display: flex; gap: 2rem; margin-bottom: 2.5rem; }
.cal-category--image .cal-category__desc { padding-top: 0.125rem; }
.cal-category__figure { flex: none; width: 200px; }
.cal-category__figure img { width: 100%; height: auto; border: var(--cal-hairline); }
.cal-category__desc { max-width: 78ch; }

.cal-subcats { margin-bottom: 2.5rem; }
.cal-subcats__label {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}
[dir="rtl"] .cal-subcats__label { letter-spacing: normal; text-transform: none; }
.cal-subcats__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cal-subcats__list a {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  border: var(--cal-hairline);
  background: var(--cal-card);
  font-size: 0.8125rem;
  color: var(--cal-ink-2);
}
.cal-subcats__list a:hover { border-color: var(--cal-brass-ink); color: var(--cal-brass-ink); }

/* ====================================================== site index ======= */

.cal-site { padding-block: 3rem 5rem; }
.cal-site__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cal-rule);
  border: var(--cal-hairline);
}
.cal-site__cell { display: flex; flex-direction: column; background: var(--cal-card); }
/* A thumbnail already separates the card from its neighbour above, so the
   body does not need to. */
.cal-site__cell--thumb .cal-site__body { padding-top: 1.25rem; }
.cal-site__figure { display: block; }
.cal-site__figure img { width: 100%; height: auto; }
.cal-site__body { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem; }
.cal-site__title {
  margin: 0;
  font-family: var(--cal-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}
[dir="rtl"] .cal-site__title { font-family: var(--cal-arabic); }
.cal-site__title a { color: var(--cal-navy); }
.cal-site__title a:hover { color: var(--cal-brass-ink); }
.cal-site__desc { font-size: 0.875rem; color: var(--cal-ink-3); }
.cal-site__links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: auto; padding-top: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.cal-site__links a { color: var(--cal-brass-ink); }
.cal-site__links a:hover { color: var(--cal-brass-deep); }

@media (max-width: 760px) {
  .cal-ann,
  .cal-category { flex-direction: column; gap: 1rem; }
  .cal-ann__figure,
  .cal-category__figure { width: 100%; max-width: 240px; }
  .cal-page,
  .cal-search,
  .cal-site { padding-block: 2rem 3rem; }
}

/* ==================== neutralise the inherited Default theme ============= */
/* Caliper is a CHILD of the Default theme, so the parent's compiled stylesheet
   still loads ahead of this one. The chrome wears the structural pkp_* classes
   because core skip links, the sidebar hook and block plugins target them --
   which also means the parent's rules for those classes land on Caliper markup.
   These resets take them back. Each selector pairs the inherited class with a
   .cal-* class, so the specificity is higher than the parent's without needing
   a single !important. */

.pkp_structure_page.cal-page,
.pkp_structure_head.cal-head,
.pkp_structure_main.cal-main {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  float: none;
}
.pkp_structure_head.cal-head { position: static; }
.pkp_structure_footer_wrapper.cal-foot { padding-inline: 0; }
.pkp_structure_sidebar.cal-blocks { width: auto; padding-inline: 0; float: none; }

/* ============================ inherited Default-theme pages ============== */
/* Article, issue, search, about and the rest are inherited rather than
   overridden, so they arrive with core pkp_* markup. These rules give that
   markup the same surface, rules and type as the pages above. */

/* NO top padding. Every Caliper page opens with a full-bleed band -- the hero
   on the homepage, .cal-arthead everywhere else -- and each band supplies its
   own internal padding. A 2.5rem pad on the container therefore sat BETWEEN the
   navigation and the band, so the band could not meet the header: a strip of
   page background showed above a section whose whole point is to run edge to
   edge. That is the "margin from the top" this theme had on every page.
   The bottom padding stays: it separates the last band from the footer, and no
   band supplies trailing space of its own. */
.pkp_structure_main.cal-main { padding-block: 0 3.5rem; }

/* Inherited Default-theme pages arrive with core pkp_* markup and NO band of
   their own, so they still need the top space the bands would otherwise give. */
.pkp_structure_main.cal-main > .pkp_page_content:first-child,
.pkp_structure_main.cal-main > .page:first-child { padding-block-start: 2.5rem; }
/* Carries the same neutralising as the reset above, plus its own width. Listed
   separately so max-width is declared exactly once for this selector. */
/* NO gutter and NO max-width here.
   Every Caliper page wraps its own content in .cal-wrap, which already applies
   both. Repeating them on the container inset the content by TWICE the design's
   gutter on every page, and -- worse -- boxed the full-bleed bands: the hero,
   the credential bar and the About feature band are meant to run edge to edge,
   and could not, because their own .cal-wrap was already inside a padded box.
   The container is now a plain block; the bands reach the viewport edge and the
   measured columns inside them get the gutter exactly once.
   Found by walking the rendered DOM, not by reading this file: counting
   occurrences cannot see containment, and the header and footer legitimately
   carry .cal-wrap OUTSIDE this element. */
.pkp_structure_content.cal-content { margin: 0; padding: 0; border: 0; background: none;
  box-shadow: none; float: none; max-width: none; }
/* The sidebar variant is the ONE case that still needs the container to be a
   measured box: the block plugins sit beside the content as a grid column, so
   the grid itself has to be the thing that is centred and gutter-ed. Pages in
   this mode keep their inner .cal-wrap, so those rules zero it out below to
   avoid re-introducing the double gutter this time only in the sidebar case. */
.pkp_structure_content.cal-content.has_sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: start;
  max-width: var(--cal-wrap);
  margin-inline: auto;
  padding-inline: var(--cal-gutter);
}
.pkp_structure_content.cal-content.has_sidebar .cal-wrap { max-width: none; padding-inline: 0; }
.pkp_structure_content.cal-content.has_sidebar .cal-main { min-width: 0; }

.cal-main h1,
.cal-main h2,
.cal-main h3 {
  font-family: var(--cal-serif);
  font-weight: 700;
  line-height: 1.25;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-main h1,
[dir="rtl"] .cal-main h2,
[dir="rtl"] .cal-main h3 { font-family: var(--cal-arabic); line-height: 1.45; }
.cal-main h1 { font-size: 2rem; }
.cal-main h2 { font-size: 1.5rem; }
.cal-main h3 { font-size: 1.1875rem; }

.cal-main .page > h1:first-child,
.cal-main .page_title { margin-top: 0; padding-bottom: 1rem; border-bottom: var(--cal-hairline); }

.cal-main .obj_article_details .title { font-family: var(--cal-serif); color: var(--cal-navy); }
.cal-main .obj_article_details .authors,
.cal-main .obj_article_details .item { border-top: var(--cal-hairline); padding-block: 1rem; }
.cal-main .obj_article_details .doi,
.cal-main .obj_article_details .published { font-family: var(--cal-mono); font-size: 0.8125rem; }

.cal-main .cmp_button,
.cal-main .obj_galley_link,
.cal-main .galley_link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--cal-navy);
  border-radius: 0;
  background: transparent;
  font-family: var(--cal-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--cal-navy);
}
.cal-main .cmp_button:hover,
.cal-main .obj_galley_link:hover,
.cal-main .galley_link:hover { background: var(--cal-navy); color: #fff; }

.cal-main .obj_issue_toc .section > h2,
.cal-main .obj_issue_toc .section > h3 {
  margin: 2rem 0 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cal-brass);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[dir="rtl"] .cal-main .obj_issue_toc .section > h2,
[dir="rtl"] .cal-main .obj_issue_toc .section > h3 { letter-spacing: normal; text-transform: none; }
.cal-main .cmp_article_list { margin: 0; padding: 0; list-style: none; }

.cal-main table { width: 100%; border-collapse: collapse; }
.cal-main th,
.cal-main td { padding: 0.625rem 0.75rem; border-bottom: var(--cal-hairline); text-align: start; }
.cal-main th { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cal-ink-3); }

.cal-main input[type="text"],
.cal-main input[type="search"],
.cal-main input[type="email"],
.cal-main input[type="password"],
.cal-main select,
.cal-main textarea,
.cal-searchform input,
.cal-searchform select {
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--cal-field-edge);
  border-radius: 0;
  background: var(--cal-card);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--cal-ink);
}
.cal-main input:focus-visible,
.cal-main select:focus-visible,
.cal-main textarea:focus-visible { outline: 2px solid var(--cal-brass); outline-offset: 1px; }

.cal-prose a { text-decoration: underline; text-underline-offset: 2px; }

/* Block plugins. Every page here is full width, so the blocks cannot be a
   column beside the content -- they become a band above the footer instead,
   with each block a cell on the same hairline grid the rest of the theme
   uses. A journal with no block plugins renders nothing at all. */
.cal-blocks {
  padding-block: 3rem;
  border-top: var(--cal-hairline);
  background: var(--cal-card);
  font-size: 0.9063rem;
}
.cal-blocks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
  align-items: start;
}
.cal-blocks .pkp_block { min-width: 0; }
.cal-blocks .title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--cal-brass);
  font-family: var(--cal-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-navy);
}
[dir="rtl"] .cal-blocks .title { letter-spacing: normal; text-transform: none; font-size: 0.8125rem; }
.cal-blocks ul { margin: 0; padding: 0; list-style: none; }
.cal-blocks li { padding-block: 0.3125rem; }
.cal-blocks a { color: var(--cal-ink-2); }
.cal-blocks a:hover { color: var(--cal-brass-ink); }

/* ==================================================== login / register === */
/* The design shows a split panel: a navy half carrying the journal's pitch,
   and a white half holding the form.
/
   This is CSS ONLY -- there is deliberately no userLogin.tpl or
   userRegister.tpl override. Core's form carries the CSRF token, the error
   block, the $source redirect that returns a user to the page that sent them
   here, and the reCAPTCHA/Altcha spam blockers. Re-authoring that markup to
   match a canvas would put authentication at risk for a visual gain, and any
   field the design happens not to show would be silently dropped. Styling the
   existing markup gets the same look and cannot break sign-in.
/
   The navy half is a ::before on the page, so no element has to be invented
   and nothing needs JavaScript. Its copy is the journal's own name, already
   in the DOM as the page heading. */

.page_login,
.page_register {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* The pitch panel. Content comes from the page's own heading, so an
   untranslated journal never shows an empty box. */
.page_login::before,
.page_register::before {
  content: "";
  align-self: stretch;
  min-block-size: 22rem;
  background:
    linear-gradient(rgba(143, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 163, 184, 0.08) 1px, transparent 1px),
    var(--cal-navy);
  background-size: 52px 52px, 52px 52px, auto;
}

.page_login > *,
.page_register > * { grid-column: 2; }

/* The heading sits above the form in the right-hand column, as the design has
   it -- not centred over both halves. */
.page_login > h1,
.page_register > h1 {
  margin: 0 0 0.75rem;
  font-family: var(--cal-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 700;
  color: var(--cal-navy);
}

.page_login .cmp_breadcrumbs,
.page_register .cmp_breadcrumbs { grid-column: 2; }

/* --- the form itself ------------------------------------------------------ */

.page_login .cmp_form,
.page_register .cmp_form { max-inline-size: 25rem; }

.page_login fieldset.fields,
.page_register fieldset.fields {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.page_login .fields > div,
.page_register .fields > div { display: flex; flex-direction: column; gap: 0.4375rem; }

.page_login .fields .label,
.page_register .fields .label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cal-navy);
}

.page_login .fields .required,
.page_register .fields .required { color: var(--cal-brass-ink); }

.page_login .cmp_form input[type="text"],
.page_login .cmp_form input[type="email"],
.page_login .cmp_form input[type="password"],
.page_register .cmp_form input[type="text"],
.page_register .cmp_form input[type="email"],
.page_register .cmp_form input[type="password"],
.page_register .cmp_form select {
  inline-size: 100%;
  padding: 0.75rem 0.8125rem;
  border: 1px solid var(--cal-field-edge);
  background: var(--cal-card);
  font: inherit;
  font-size: 0.90625rem;
  color: var(--cal-ink);
}

/* Checkbox rows read as one line, not a stacked label above a control. */
.page_login .checkbox label,
.page_register .checkbox label,
.page_register .fields label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--cal-ink-2);
  cursor: pointer;
}

.page_login input[type="checkbox"],
.page_register input[type="checkbox"] { accent-color: var(--cal-brass); inline-size: 0.9375rem; block-size: 0.9375rem; }

/* The forgot-password link sits on the password label's own row. */
.page_login .password label { position: relative; }

.page_login .password label > a {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--cal-brass-ink);
}

.page_login .password label > a:hover { color: var(--cal-brass-deep); }

/* --- buttons -------------------------------------------------------------- */

.page_login .buttons,
.page_register .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 0.25rem;
}

.page_login .buttons button.submit,
.page_register .buttons button.submit {
  padding: 0.8125rem 1.75rem;
  border: 0;
  background: var(--cal-brass);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.page_login .buttons button.submit:hover,
.page_register .buttons button.submit:hover { background: var(--cal-brass-deep); }

.page_login .buttons a.register,
.page_register .buttons a { font-size: 0.8125rem; font-weight: 600; color: var(--cal-brass-ink); }

/* --- errors --------------------------------------------------------------- */
/* A sign-in error must be impossible to miss: a left bar, not a colour alone. */
.page_login .pkp_form_error,
.page_register .pkp_form_error {
  padding: 0.875rem 1rem;
  margin-block-end: 1rem;
  border: var(--cal-hairline);
  border-inline-start: 3px solid var(--cal-brass);
  background: var(--cal-card);
  font-size: 0.84375rem;
  color: var(--cal-ink);
}

@media (max-width: 900px) {
  /* The pitch panel is decoration; below this width the form needs the whole
     column more than the page needs the picture. */
  .page_login,
  .page_register { grid-template-columns: minmax(0, 1fr); }
  .page_login::before,
  .page_register::before { display: none; }
  .page_login > *,
  .page_register > *,
  .page_login .cmp_breadcrumbs,
  .page_register .cmp_breadcrumbs { grid-column: 1; }
}

/* ======================================================= skip links ======= */
/* Core's skipLinks.tpl is included by the header, but the theme never styled
   .cmp_skip_to_content -- so three links rendered VISIBLY at the top of every
   page, above the first band. That is both the stray text at the top of the
   page and part of the "margin from the top": a visible nav nobody designed.
   The design's own treatment: parked off-screen, revealed on keyboard focus.
   They must stay in the DOM and stay focusable -- display:none would remove
   the only keyboard route past the navigation. */
.cmp_skip_to_content { position: absolute; z-index: 100; }

.cmp_skip_to_content a {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  padding: 0.625rem 1rem;
  background: var(--cal-navy);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.cmp_skip_to_content a:focus,
.cmp_skip_to_content a:focus-visible { inset-inline-start: 0; }

/* ========================================================== about ======== */
/* The structured About page. Values are the design's own: a 230px rail beside
   the column, a 56px gutter, 26px section headings over a 44px brass rule, and
   a 2-up scope grid drawn with hairlines rather than borders per cell. */

.cal-arthead__lede {
  margin: 0.75rem 0 0;
  max-width: 44rem;
  font-size: 1.03125rem;
  line-height: 1.65;
  color: var(--cal-ink-2);
  text-wrap: pretty;
}

.cal-about {
  display: grid;
  grid-template-columns: minmax(0, 14.375rem) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
  padding-block: 2.75rem 5rem;
}

.cal-about__rail { top: calc(var(--cal-stick) + 1.5rem); }
.cal-about__rail .cal-contents__list { counter-reset: none; }

.cal-about__body {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  min-width: 0;
  max-width: 47.5rem;
}

/* The base section carries no chrome of its own -- the column's gap does the
   separating. It is declared so the feature modifier has something to modify,
   and so `min-width: 0` stops a long DOI or URL forcing the grid wider than
   its track. */
.cal-about__section { min-width: 0; }

.cal-about__title {
  margin: 0 0 0.375rem;
  font-family: var(--cal-serif);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cal-navy);
  text-wrap: balance;
}

/* The brass underline is a fixed 44px bar, not a full rule -- it marks the
   heading without dividing the column. */
.cal-about__rule {
  display: block;
  inline-size: 2.75rem;
  block-size: 2px;
  margin-block-end: 1.125rem;
  background: var(--cal-brass);
}

.cal-about__intro,
.cal-about__text {
  margin: 0 0 1rem;
  font-family: var(--cal-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--cal-read);
  text-wrap: pretty;
}

.cal-about__prose {
  font-family: var(--cal-serif);
  font-size: 1.0625rem;
  color: var(--cal-read);
}

.cal-about__prose + .cal-about__prose { margin-top: 1.25rem; }

/* --- paired rows ---------------------------------------------------------- */
/* The design puts three pairs side by side -- Frequency|Language,
   Identifiers alongside, Competing Interests|Privacy -- at 1fr 1fr with a 36px
   gap, and drops the heading from 26px to 22px and the brass rule from 44px to
   36px inside them. */
.cal-about__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.25rem;
}

.cal-about__section--half .cal-about__title { font-size: 1.375rem; }
.cal-about__section--half .cal-about__rule { inline-size: 2.25rem; }

/* --- the scope grid ------------------------------------------------------- */
/* One hairline between cells, drawn by the container's background showing
   through a 1px gap, so there is no doubled border where cells meet. */
.cal-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cal-rule);
  border: var(--cal-hairline);
}

.cal-about__cell {
  padding: 0.8125rem 1.125rem;
  background: var(--cal-card);
  font-size: 0.875rem;
  color: var(--cal-read);
}

.cal-about__cell a { color: var(--cal-read); }
.cal-about__cell a:hover { color: var(--cal-brass-ink); }

/* --- identifier pairs ----------------------------------------------------- */
.cal-about__pairs { margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }

.cal-about__pair {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cal-about__pair dt {
  order: 2;
  font-size: 0.78125rem;
  color: var(--cal-ink-3);
}

.cal-about__pair dd {
  order: 1;
  margin: 0;
  font-family: var(--cal-mono);
  font-size: 1.0625rem;
  color: var(--cal-navy);
}

.cal-about__list {
  margin: 0;
  padding-inline-start: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--cal-read);
}

/* --- the feature (open access) band --------------------------------------- */
/* The one section the design paints navy. It breaks the column's own padding
   so the band reads as a band, not a card. */
.cal-about__section--feature {
  position: relative;
  overflow: hidden;
  background: var(--cal-navy);
  color: #fff;
  padding: 2rem 2.25rem;
}

.cal-about__section--feature .cal-about__inner { position: relative; }
.cal-about__section--feature .cal-about__title { color: #fff; }
.cal-about__section--feature .cal-about__rule { background: var(--cal-brass-light); }
.cal-about__section--feature .cal-about__prose,
.cal-about__section--feature .cal-about__intro { color: var(--cal-navy-pale); }
.cal-about__section--feature .cal-about__prose a { color: var(--cal-brass-light); }

/* --- review timeline ------------------------------------------------------ */
.cal-about__figure {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--cal-card);
  border: var(--cal-hairline);
}

.cal-about__figurevalue {
  font-family: var(--cal-mono);
  font-size: 1.5rem;
  color: var(--cal-navy);
}

.cal-about__figurelabel {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--cal-ink-3);
}

[dir="rtl"] .cal-about__figurelabel { letter-spacing: normal; }

/* --- indexing chips ------------------------------------------------------- */
.cal-about__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-about__chips li {
  padding: 0.6875rem 1.125rem;
  background: var(--cal-card);
  border: var(--cal-hairline);
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--cal-navy);
}

.cal-about__chips a { color: inherit; }
.cal-about__chips li:hover { border-color: var(--cal-brass-pale); }

/* --- contact -------------------------------------------------------------- */
.cal-about__contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  padding: 1.625rem 1.75rem;
  background: var(--cal-card);
  border: var(--cal-hairline);
}

.cal-about__contactcol { display: flex; flex-direction: column; gap: 0.375rem; }

.cal-about__contactlabel {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cal-ink-3);
}

[dir="rtl"] .cal-about__contactlabel { letter-spacing: normal; text-transform: none; }

.cal-about__contactname { font-size: 0.9375rem; font-weight: 600; color: var(--cal-navy); }
.cal-about__contactline { font-size: 0.875rem; line-height: 1.7; color: var(--cal-ink-2); }
.cal-about__contactmail { font-size: 0.9375rem; font-weight: 600; color: var(--cal-brass-ink); }
.cal-about__contactmail:hover { color: var(--cal-brass-deep); }

.cal-about__chain { margin: 0; padding: 0; list-style: none; }

@media (max-width: 1000px) {
  /* The rail costs more than it gives once the column narrows: it becomes a
     third of the width for a list the reader can reach by scrolling. */
  .cal-about { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .cal-about__rail { display: none; }
}

@media (max-width: 760px) {
  .cal-about__section--feature { padding: 1.5rem 1.25rem; }
  .cal-about__contact { padding: 1.25rem; gap: 1.5rem; }
}

/* ========================================================= dark mode ===== */
/* The design is committed to warm paper, so dark mode is a considered
   translation rather than an inversion: the navy deepens into the surface and
   the brass carries every accent, which keeps identity intact. */

@media (prefers-color-scheme: dark) {
  :root {
    --cal-paper: #0e1620;
    --cal-card: #141f2c;
    --cal-rule: #24313f;
    --cal-ink: #e7edf3;
    --cal-ink-2: #b9c4d0;
    --cal-ink-3: #93a1af;
    --cal-ink-mute: #7d8b99;
    --cal-navy: #dfe8f1;
    --cal-navy-mid: #9dc2e6;
    --cal-tag: #9dc2e6;
    --cal-tag-edge: #2f4356;
    --cal-access: #58b3ac;
    --cal-access-edge: #2c4a49;
    --cal-chip-edge: #2b3a49;
    --cal-field-edge: #626e7e;
    /* Brass as text has to go LIGHTER on a dark ground, not darker. */
    --cal-brass-ink: #c98a55;
    --cal-read: #dbe4ec;
    color-scheme: dark;
  }
  /* The hero, cover and footer are already dark surfaces; hold their own
     navy rather than letting the token swap wash them out. */
  .cal-hero,
  .cal-cover { background: #0c1c2e; }
  .cal-hero__title { color: #fff; }
  .cal-chain__step { border-color: var(--cal-rule); color: var(--cal-ink); }
  /* On a dark surface a navy panel would vanish, so the emphasised step
     carries the brass instead -- same hierarchy, opposite ground. */
  .cal-chain__step--strong { background: var(--cal-brass-deep); border-color: var(--cal-brass-deep); }
  .cal-areas__cell > a:hover { background: #1b2836; }
}

/* ======================================================== responsive ===== */

@media (max-width: 1100px) {
  .cal-band__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .cal-band__rail { padding-inline-start: 0; border-inline-start: 0; border-top: var(--cal-hairline); padding-top: 2rem; }
  .cal-usage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --cal-gutter: 20px; }
  .cal-folio { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .cal-folio__aside { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
  .cal-cover { width: 150px; flex: none; }
  .cal-hero__watermark { width: 340px; height: 340px; inset-inline-end: -110px; }
  .cal-foot__cols { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; }
}

@media (max-width: 760px) {
  .cal-util__inner { font-size: 0.6875rem; gap: 0.875rem; }
  .cal-util__left,
  .cal-util__right { gap: 0.875rem; }

  .cal-masthead__inner { flex-wrap: wrap; padding-block: 1rem 0; }
  .cal-masthead__cta { order: 3; width: 100%; margin-inline-start: 0; margin-top: 0.875rem; }

  /* The navigation collapses behind a button. Without JS the list stays in the
     flow -- .cal-nav--js is added by caliper.js, and only then is it hidden. */
  .cal-nav__toggle { display: inline-flex; }
  .cal-nav--js .cal-nav__list { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .cal-nav--js.cal-nav--open .cal-nav__list { display: flex; }
  .cal-nav__list a { padding-block: 0.6875rem; border-bottom: var(--cal-hairline); }
  .cal-nav__list ul { position: static; display: block; border: 0; padding: 0 0 0 1rem; }
  .cal-nav__search { margin-inline-start: 0; }

  .cal-hero__inner { padding-block: 3.25rem 2.75rem; gap: 1.25rem; }
  /* Mobile lattice, per the 390px design canvas (see .cal-hero__grid). */
  .cal-hero__grid { background-size: 34px 34px; }
  .cal-cred__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0; }
  .cal-cred__cell:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .cal-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-folio__aside { flex-direction: column; }
  .cal-cover { width: 100%; max-width: 220px; }
  .pkp_structure_content.cal-content.has_sidebar { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ print ====== */

@media print {
  .cal-util,
  .cal-nav,
  .cal-hero__watermark,
  .cal-foot__watermark,
  .cal-masthead__cta,
  .cal-foot__pkp { display: none !important; }
  .cal-body { background: #fff; color: #000; font-size: 11pt; }
  .cal-hero { background: #fff; color: #000; }
  .cal-hero__title { color: #000; }
  .cal-foot { background: #fff; color: #000; border-top: 1px solid #000; }
  .cal-row { break-inside: avoid; }
}

/* ============================================== reduced motion =========== */

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

/* The settings-form section headers are NOT styled here. This stylesheet is
   registered for the frontend only, so a rule here would never reach the
   Appearance form; those headers carry their styling inline on the element
   instead. See registerOptions() in CaliperThemePlugin.php. */