/* ============================================================================
   THEMIS — Problems of Modern Law (modernlaw.uz) · OJS 3.5 child theme
   Design language: "Alexandria" — ported from sindex.uz v4, which measured
   openalex.org directly (frontend/public/theme.css + src/index.css).
   Motion layer: similex.org, library-free.

   HARD RULES (from ~/sindex/docs/design-system.md):
     1. Cards have NO shadow. Hierarchy comes from a 1px #ececee hairline.
        Floating layers only (dropdown/modal) may use --shadow-pop.
     2. NO pills. border-radius:999px is reserved for true circles
        (dots, avatars, step markers). Controls are 6px, cards 8px, panels 12px.
     3. Page ground is #fafafa, cards are #fff. If both were white the card
        would vanish — there is no shadow to rescue it.
     4. NO dark sections. Rhythm alternates white and #fafafa bands.
     5. Motion is opacity/transform only. Layout never shifts (CLS 0).
     6. The hidden pre-reveal state is NEVER written in CSS. js/themis.js adds
        `.reveal-armed`; if JS dies the page is fully visible.
     7. Navy #0F2A4A is a LINK/focus/active colour — never a button fill.
        Buttons are pure black #000. Brass #C9A227 is badge-only, never a CTA.
        Cobalt #2563eb (sindex's link colour) is NOT used here at all.

   ---------------------------------------------------------------------------
   CLASS CONTRACT — Phase B templates must use exactly these names.
   ---------------------------------------------------------------------------
   Every .th-section paints edge to edge; wrap its contents in .th-shell.

   Layout      .th-shell · .th-section · .th-section--tint · .th-eyebrow
               .th-h2 · .th-lead
   Buttons     .th-btn + .th-btn-dark / .th-btn-ghost · .th-chip (+--brass)
   Hero        .th-hero · .th-hero-grid · .th-hero-copy · .th-hero-title
               .th-hero-lead · .th-hero-actions · .th-hero-chips
               .th-hero-media · .th-hero-caption
   Stats       .th-stats · .th-stat · .th-stat-num · .th-stat-label
   About/EIC   .th-about-grid · .th-about-body · .th-eic-card · .th-eic-avatar
               .th-eic-name · .th-eic-title
   Process     .th-process · .th-step · .th-step-dot · .th-step-name
               .th-step-desc
   Topics      .th-topics · .th-topic-card · .th-topic-code · .th-topic-name
               .th-topic-desc
   CFP         .th-cfp · .th-cfp-badge · .th-cfp-title · .th-cfp-body
               .th-cfp-actions · .th-cfp-deadline
   Indexing    .th-index · .th-index-lede · .th-bases · .th-base
               .th-base.is-pending · .th-base-name · .th-base-desc
               .th-marquee · .th-marquee-track · .th-marquee-item
   Policies    .th-policy-grid · .th-policy-card (h3 + p inside)
   FAQ         .th-faq · .th-faq-body   (native <details>, no JS)
   Footer      .th-footer · .th-f-top · .th-f-mark · .th-f-badges · .th-f-cols
               .th-f-contact · .th-f-org · .th-f-bottom
   Header      .cf-head (+.is-scrolled/.cf-open) · .cf-head-inner · .cf-brand
               .cf-burger · .cf-nav · .cf-menu · .cf-actions · .cf-lang
               .cf-lang-btn · .cf-lang-menu (+.is-open) · .cf-user-menu
               .th-brand · .th-search-form · .th-search-input
   Motion      [data-reveal] (+ data-reveal-delay in ms) ·
               [data-countup][data-value] (integer) ·
               .reveal-armed/.is-in · .lift · .art · .press · .acc/.acc-open
               .nav-link · .menu-in · .skeleton
               (JS-owned: body.th-noscroll, .cf-head.is-scrolled,
                .th-cu-ghost/.th-cu-anim — templates never write these)
   Utility     .sr-only · .th-meta · .th-mono · .th-badge-pill/.th-badge-brass
   ============================================================================ */

/* Uzbek modifier letters U+02BB (ʻ) and U+02BC (ʼ).
   Google Fonts ships them in NO font: the `latin` subset skips them and
   `latin-ext` is U+0100-02BA, U+02BD-02C5 — exactly these two fall in the gap.
   Without this face every oʻ/gʻ apostrophe is drawn from a system fallback:
   different weight, different width, a visible jump mid-word. 1.3 KB Inter
   subset, first in the stack, scoped by unicode-range. */
@font-face {
  font-family: "Uz Apostrophe";
  src: url("../assets/uz-apostrophe.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+02BB, U+02BC;
}

/* ============================================================================
   1. TOKENS
   ============================================================================ */
:root {
  /* Ground / paper */
  --canvas: #fafafa;
  --paper: #ffffff;
  --surface: #fafafa;
  --surface2: #f4f4f5;

  /* Ink */
  --ink: #0a0a0a;
  --gray: #52525b;
  --gray-soft: #71717a;

  /* Hairlines */
  --line: #ececee;
  --line-strong: #e4e4e7;
  --line-hover: #d4d4d8;

  /* Juridical navy — links, focus, active state. NEVER a button fill. */
  --primary: #0f2a4a;
  --primary-hover: #1b4272;
  --primary-tint: #edf2f8;

  /* Brass — badges and marks only. NEVER a CTA. */
  --brass: #c9a227;
  --brass-ink: #8a6d12;
  --brass-soft: #faf3dc;

  /* Buttons are black */
  --btn: #000000;
  --btn-hover: #262626;

  /* Radii — 999px is for circles only */
  --r-xs: 4px;
  --r-ctl: 6px;
  --r-card: 8px;
  --r-panel: 12px;

  /* Elevation */
  --shadow-card: none;
  --shadow-lift: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
  --shadow-pop: 0 4px 16px rgb(0 0 0 / .10), 0 1px 3px rgb(0 0 0 / .06);

  /* Motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-reveal: 550ms;
  --dur-card: 120ms;

  /* Type */
  --font-sans: "Uz Apostrophe", "Inter", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --shell: 1200px;
  --gutter: 20px;
  --header-h: 56px;
  --anchor-offset: 80px;
  --sec-py: 64px;

  /* Type scale (plan §1) */
  --fs-display: clamp(2.25rem, 1.1rem + 4.8vw, 3.75rem);
  --fs-h2: clamp(2rem, 1.1rem + 3.6vw, 3.125rem);
  --fs-stat: clamp(2rem, 1.2rem + 2.6vw, 2.625rem);
}

@media (min-width: 640px) { :root { --sec-py: 80px; } }
@media (min-width: 768px) { :root { --gutter: 24px; } }

/* ============================================================================
   2. BASE
   ============================================================================ */
html { background: var(--canvas); }
html, body { overflow-x: clip; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pkp_structure_page,
.pkp_structure_main,
.pkp_structure_content { background: transparent; }
.pkp_structure_main::before,
.pkp_structure_main::after { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.pkp_structure_main a { color: var(--primary); text-decoration: none; }
.pkp_structure_main a:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 2px; opacity: 1; }

p, li { color: var(--gray); }
.pkp_structure_main, .pkp_structure_main p, .pkp_structure_main li { color: var(--gray); }

::selection { background: var(--primary-tint); color: var(--ink); }
mark { background: var(--primary-tint); color: inherit; padding: 0 2px; border-radius: 3px; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }

/* Anchor landing offset — sticky header is 56px, 80px leaves breathing room */
[id] { scroll-margin-top: var(--anchor-offset); }

.sr-only {
  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;
}

.th-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-soft);
}
.th-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .94em; }

/* ============================================================================
   3. MOTION LAYER — ported from ~/sindex/frontend/src/index.css:290-473
   Tailwind var() references converted to this theme's own properties.

   ⚠️ The initial hidden state is NOT written here. js/themis.js adds
   `.reveal-armed`. JS absent → page fully visible, no .no-js trick needed.
   ⚠️ All effects are opacity/transform only — layout never shifts.
   ============================================================================ */

/* ── Scroll-reveal ── */
.reveal-armed {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
.reveal-armed.is-in { opacity: 1; transform: none; }

/* v3 alias, kept for any markup still using it */
.sx-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out-expo) var(--reveal-delay, 0ms);
}
.sx-reveal.is-in { opacity: 1; transform: none; }

/* ── Interactive card: hairline + micro-lift ──
   OpenAlex does not lift cards; similex does. Middle road: 1px — the feel is
   there, the jump is not. */
.lift {
  transition:
    transform var(--dur-base) var(--ease-standard),
    border-color var(--dur-card) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.lift:hover,
.lift:focus-within {
  transform: translateY(-1px);
  border-color: var(--line-hover);
  box-shadow: var(--shadow-lift);
}

/* Illustration inside a card answers the card — one rule */
.art { transition: transform 420ms var(--ease-out-expo); }
.lift:hover .art,
.lift:focus-within .art { transform: scale(1.03); }

/* ── Button/link: colour + light press ── */
.press {
  transition:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.press:active { transform: translateY(1px); }

/* ── Accordion: 0fr → 1fr, no max-height guessing ── */
.acc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out-expo);
}
.acc > * {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.acc-open { grid-template-rows: 1fr; }
.acc-open > * { opacity: 1; transition-delay: 80ms; }

/* ── Mobile menu: soft drop-in ── */
.menu-in { animation: menuIn 220ms var(--ease-out-expo) both; }

/* ── Header link: underline grows from the left on hover/current ── */
.nav-link {
  position: relative;
  transition:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0.625rem;
  bottom: 0.125rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current]::after { transform: scaleX(1); }

/* ── Marquee: doubled track, pauses on hover ── */
.sx-marquee-track,
.th-marquee-track {
  display: flex;
  width: max-content;
  animation: sx-marquee var(--marquee-duration, 40s) linear infinite;
}
.sx-marquee:hover .sx-marquee-track,
.sx-marquee:focus-within .sx-marquee-track,
.th-marquee:hover .th-marquee-track,
.th-marquee:focus-within .th-marquee-track { animation-play-state: paused; }

/* ── Carousel track: hide the scrollbar ── */
.sx-carousel-track { scrollbar-width: none; }
.sx-carousel-track::-webkit-scrollbar { display: none; }

/* ── Skeleton shimmer ── */
.skeleton {
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface2) 25%, var(--line) 50%, var(--surface2) 75%);
  background-size: 800px 100%;
  animation: sx-shimmer 1.4s linear infinite;
}

@keyframes sx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes menuIn {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes sx-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ============================================================================
   4. LAYOUT PRIMITIVES
   ============================================================================ */
.th-shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.th-section {
  padding-block: var(--sec-py);
  background: var(--paper);
}
.th-section--tint {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Consecutive tint bands must not double their hairline */
.th-section--tint + .th-section--tint { border-top: 0; }

.th-eyebrow,
.th-kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-soft);
  margin: 0 0 12px;
}

.th-h2,
h2.th-h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}

.th-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--gray);
  max-width: 62ch;
  margin: 0 0 24px;
}

/* Prose column for static pages */
.pkp_page_about .pkp_structure_main > *,
.pkp_op_view .pkp_structure_main > * { max-width: 736px; }

/* Homepage is full-bleed: sections paint their own bands edge to edge */
.pkp_page_index .pkp_structure_main,
.pkp_page_index .pkp_structure_content {
  border: none !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pkp_page_index .pkp_structure_sidebar { display: none; }
.pkp_page_index .pkp_structure_page { max-width: none; }

/* ============================================================================
   5. CONTROLS — buttons, chips, badges
   ============================================================================ */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.th-btn:active { transform: translateY(1px); }

.th-btn-dark,
.pkp_structure_main a.th-btn-dark {
  background: var(--btn);
  color: #fff !important;
  border-color: var(--btn);
}
.th-btn-dark:hover,
.pkp_structure_main a.th-btn-dark:hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: #fff !important;
  text-decoration: none;
  opacity: 1;
}

.th-btn-ghost,
.pkp_structure_main a.th-btn-ghost {
  background: var(--paper);
  color: var(--ink) !important;
  border-color: var(--line-strong);
}
.th-btn-ghost:hover,
.pkp_structure_main a.th-btn-ghost:hover {
  background: var(--surface2);
  border-color: var(--line-hover);
  color: var(--ink) !important;
  text-decoration: none;
}

/* Status chip — r6, never a pill */
.th-chip,
.th-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--paper);
  color: var(--gray);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.th-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;            /* a real circle — 999px is legal here */
  background: var(--primary);
  flex: none;
}
.th-chip--brass { background: var(--brass-soft); border-color: var(--brass-soft); color: var(--brass-ink); }
.th-chip--brass::before { background: var(--brass); }

.th-badge-pill {
  display: inline-block;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-ctl);
}
.th-badge-brass { background: var(--brass-soft); color: var(--brass-ink); }

/* ============================================================================
   6. SITE HEADER — flat white, sticky, 56px, one hairline
   ============================================================================ */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_head_wrapper { background: transparent !important; }

.cf-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.cf-head.is-scrolled { box-shadow: var(--shadow-lift); }

.cf-head-inner {
  display: flex;
  align-items: center;
  /* Uzun lokallar (RU) sig'masa ustma-ust chizilmasin — ikkinchi qatorga o'tsin */
  flex-wrap: wrap;
  gap: 0 14px;
  max-width: var(--shell);
  margin-inline: auto;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
}

.cf-brand { flex: 0 0 auto; }
.pkp_site_name .is_img img { display: none; }

/* ── Brand mark ── */
.th-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.th-brand:hover { text-decoration: none; }
.th-brand-mark { flex: 0 0 auto; }
.th-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.th-brand-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.th-brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-soft);
}
/* Desktopda subtitr yashirin: RU nav bandlari bilan 1160px byudjetga sig'maydi
   (subtitr ~190px oladi). Burger rejimida (≤1080) joy bor — ko'rinadi. */
@media (min-width: 1081px) {
  .th-brand-sub { display: none; }
}

/* ── Primary nav — underline grows, no pills ── */
.cf-nav { display: flex; align-items: center; min-width: 0; }
ul.pkp_navigation_primary.cf-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  background: transparent;
  border-radius: 0;
  /* Same PKP-core width/margin neutralisation as the user menu. */
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.cf-menu > li { position: relative; }
.cf-menu > li > a {
  position: relative;
  display: block;
  padding: 8px 8px;
  border-radius: var(--r-ctl);
  color: #374151 !important;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}
.cf-menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.cf-menu > li > a:hover,
.cf-menu > li > a:focus-visible { color: var(--ink) !important; text-decoration: none; }
.cf-menu > li > a:hover::after,
.cf-menu > li > a:focus-visible::after,
.cf-menu > li > a[aria-current]::after { transform: scaleX(1); }

/* Dropdown submenus — floating layer, shadow-pop is allowed here */
.cf-menu li ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  margin-top: 6px;
  list-style: none;
  z-index: 60;
}
.cf-menu li ul a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-ctl);
  color: var(--gray) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.cf-menu li ul a:hover { background: var(--surface); color: var(--ink) !important; text-decoration: none; }

/* ── Right actions ── */
.cf-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.th-search-form { display: flex; align-items: center; }
.th-search-input {
  width: 110px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: width var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.th-search-input:focus {
  /* Kengayish yo'q: fokusda width o'zgarsa flex qatori sakraydi (RU byudjeti tor) */
  width: 110px;
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
.th-search-input::placeholder { color: var(--gray-soft); }

.cf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-ctl);
  color: var(--gray) !important;
}
.cf-icon-btn:hover { color: var(--ink) !important; background: var(--surface2); }

/* ── Language dropdown ── */
.cf-lang { position: relative; }
.cf-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--paper);
  color: var(--gray) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cf-lang-btn:hover,
.cf-lang-btn[aria-expanded="true"] { color: var(--ink) !important; border-color: var(--line-hover); }
.cf-caret { font-size: 9px; opacity: .7; }
.cf-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out-expo), visibility var(--dur-fast);
}
.cf-lang-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.cf-lang-menu a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-ctl);
  color: var(--gray) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.cf-lang-menu a:hover { background: var(--surface); color: var(--ink) !important; text-decoration: none; }
.cf-lang-menu .is-current a { color: var(--ink) !important; font-weight: 700; }

/* ── User menu — last item is the black CTA ── */
.cf-user { position: relative; }
ul.pkp_navigation_user.cf-user-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  /* PKP core gives .pkp_navigation_user responsive column widths + drawer
     margins/border at >=768px — neutralise them or the UL fills the header. */
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  float: none !important;
}
.cf-user-menu > li { position: relative; }
.cf-user-menu > li > a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-ctl);
  color: #374151 !important;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.cf-user-menu > li > a:hover { color: var(--ink) !important; background: var(--surface2); text-decoration: none; }
.cf-user-menu > li:last-child > a {
  background: var(--btn);
  color: #fff !important;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-ctl);
}
.cf-user-menu > li:last-child > a:hover { background: var(--btn-hover); color: #fff !important; }
.cf-user-menu li ul {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 210px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  margin-top: 6px;
  list-style: none;
  z-index: 70;
}
.cf-user-menu li ul a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-ctl);
  color: var(--gray) !important;
  font-size: 13.5px;
  text-decoration: none;
  background: transparent;
}
.cf-user-menu li ul a:hover { background: var(--surface); color: var(--ink) !important; text-decoration: none; }

/* ── Burger ── */
.cf-burger {
  display: none;
  position: static;
  float: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--r-ctl);
}
.cf-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.cf-head.cf-open .cf-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cf-head.cf-open .cf-burger span:nth-child(2) { opacity: 0; }
.cf-head.cf-open .cf-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .cf-head-inner { flex-wrap: wrap; column-gap: 12px; row-gap: 0; padding: 8px var(--gutter); }
  .cf-brand { margin-right: auto; }
  .cf-burger { display: block; order: 2; }
  .cf-nav, .cf-actions {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    position: static;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease-out-expo);
  }
  .cf-head.cf-open .cf-nav {
    max-height: 74vh;
    overflow: auto;
    padding: 12px 0 4px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
  }
  .cf-head.cf-open .cf-actions { max-height: 44vh; overflow: visible; padding: 4px 0 14px; }
  ul.pkp_navigation_primary.cf-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }
  .cf-menu > li { width: 100%; }
  .cf-menu > li > a { padding: 10px 8px; font-size: 15px; }
  .cf-menu > li > a::after { display: none; }
  .cf-menu > li > a:hover { background: var(--surface2); }
  .cf-menu li ul {
    position: static;
    border: none;
    box-shadow: none;
    background: transparent;
    margin: 2px 0 6px 14px;
    padding: 0;
    min-width: 0;
  }
  .cf-actions { margin-left: 0; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .th-search-form { width: 100%; }
  .th-search-input, .th-search-input:focus { width: 100%; }
  .cf-lang { width: 100%; }
  .cf-lang-btn { width: 100%; justify-content: space-between; }
  .cf-lang-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 4px 0 0 10px;
    margin-top: 4px;
  }
  .cf-user { width: 100%; }
  .cf-user-menu { width: 100% !important; }
  .cf-user-menu { flex-wrap: wrap; gap: 8px; }
}

/* Scroll lock while the mobile menu is open (class set by themis.js) */
body.th-noscroll { overflow: hidden; }

/* ============================================================================
   7. HOMEPAGE — HERO
   ============================================================================ */
.th-hero {
  background: var(--paper);
  padding-block: clamp(40px, 3rem + 2vw, 88px) var(--sec-py);
}

.th-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .th-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .th-hero-grid > * { grid-column: span 6; min-width: 0; }
}
.th-hero-copy { min-width: 0; }

.th-hero-title,
h1.th-hero-title {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
}
.th-hero-title span { display: block; }

.th-hero-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--gray);
  max-width: 54ch;
  margin: 0 0 28px;
}

.th-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}

.th-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Statue panel — r12, hairline, image clipped by the panel */
.th-hero-media {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface2);
  overflow: hidden;
}
.th-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 28%;
}
.th-hero-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-soft);
  margin: 10px 0 0;
}

/* ============================================================================
   8. HOMEPAGE — STATS BAND
   ============================================================================ */
.th-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}
@media (min-width: 640px) { .th-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .th-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.th-stat { padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); min-width: 0; }
.th-stat-num {
  display: block;
  position: relative;
  font-size: var(--fs-stat);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* CountUp's zero-CLS layer (spans built by themis.js): the final value holds
   the width invisibly, the animating value rides above it absolutely, and a
   sr-only copy carries the real number to assistive tech. */
[data-countup] { position: relative; display: inline-block; font-variant-numeric: tabular-nums; }
.th-cu-anim { position: absolute; inset: 0; }
.th-cu-ghost { visibility: hidden; }
.th-stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--gray);
}

/* ============================================================================
   9. HOMEPAGE — ABOUT + EDITOR-IN-CHIEF
   ============================================================================ */
.th-about-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) {
  .th-about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
}
.th-about-body { font-size: 16px; line-height: 1.7; color: var(--gray); max-width: 68ch; }
.th-about-body p { margin: 0 0 14px; }
.th-jabout-body { font-size: 16px; line-height: 1.7; color: var(--gray); max-width: 68ch; }

.th-eic-card {
  display: flex;
  gap: 18px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  transition: border-color var(--dur-card) var(--ease-standard), box-shadow var(--dur-card) var(--ease-standard);
}
.th-eic-avatar {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 50%;              /* a real circle */
  background: var(--primary-tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.th-eic-name { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -.01em; }
.th-eic-title { color: var(--gray); font-size: 14px; line-height: 1.5; margin: 0; }

/* ============================================================================
   10. HOMEPAGE — PEER-REVIEW PROCESS
   ============================================================================ */
.th-process { display: grid; gap: 4px; }

.th-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
  padding-bottom: 22px;
}
.th-step:last-child { padding-bottom: 0; }
/* Vertical connector below 900px */
.th-step::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: 2px;
  width: 1px;
  background: var(--line-strong);
}
.th-step:last-child::after { display: none; }

.th-step-dot {
  grid-row: 1 / span 2;
  width: 36px; height: 36px;
  border-radius: 50%;              /* a real circle */
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.th-step-name,
h3.th-step-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 8px 0 4px;
}
.th-step-desc { font-size: 13.5px; line-height: 1.55; color: var(--gray); margin: 0; }

@media (min-width: 900px) {
  .th-process { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .th-step { display: block; padding-bottom: 0; }
  .th-step-dot { margin-bottom: 14px; }
  .th-step::after {
    left: 44px;
    right: -16px;
    top: 18px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .th-step-name { margin-top: 0; }
}

/* ============================================================================
   11. HOMEPAGE — THEMATIC SECTIONS
   ============================================================================ */
.th-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.th-topic-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink) !important;
}
.th-topic-card:hover { text-decoration: none; }
.th-topic-code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.th-topic-name,
h3.th-topic-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.35;
  margin: 0 0 6px;
}
.th-topic-desc { font-size: 13.5px; line-height: 1.55; color: var(--gray); margin: 0; }

/* ============================================================================
   12. HOMEPAGE — CALL FOR PAPERS
   The one place brass appears at size — and it is a badge, not the CTA.
   ============================================================================ */
.th-cfp {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 32px clamp(20px, 3vw, 40px);
}
.th-cfp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brass-soft);
  color: var(--brass-ink);
  border-radius: var(--r-ctl);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.th-cfp-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}
.th-cfp-title,
h2.th-cfp-title {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.th-cfp-body { font-size: 16px; line-height: 1.65; color: var(--gray); max-width: 62ch; margin: 0 0 22px; }
.th-cfp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.th-cfp-deadline { font-size: 13.5px; color: var(--gray-soft); font-variant-numeric: tabular-nums; }

/* ============================================================================
   13. HOMEPAGE — INDEXING (light band; the old black band is gone)
   Base names are coloured per-base by an inline style from the template.
   Third-party LOGOS are never used — licensing.
   ============================================================================ */
.th-index { background: var(--surface); }
.th-index-lede { font-size: 16px; line-height: 1.65; color: var(--gray); max-width: 62ch; margin: 0 0 28px; }

.th-bases,
.th-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.th-bases li, .th-badges li { margin: 0; }

.th-base,
.th-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink) !important;
}
.th-base:hover, .th-badge:hover { text-decoration: none; }

.th-base-name,
.th-badge-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: inherit;                  /* template supplies the brand colour inline */
}
.th-base-desc,
.th-badge-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-soft);
}
.th-base.is-pending,
.th-badge.is-pending { background: var(--surface2); border-style: dashed; }
.th-base.is-pending .th-base-name,
.th-badge.is-pending .th-badge-name { color: var(--gray-soft) !important; }

/* ── Marquee band ── */
.th-marquee {
  margin-top: 32px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.th-marquee-item {
  flex: none;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gray-soft);
  white-space: nowrap;
}

/* ============================================================================
   14. HOMEPAGE — POLICIES
   ============================================================================ */
.th-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.th-policy-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink) !important;
  transition:
    transform var(--dur-base) var(--ease-standard),
    border-color var(--dur-card) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.th-policy-card:hover,
.th-policy-card:focus-visible {
  transform: translateY(-1px);     /* -1px, not -4px */
  border-color: var(--line-hover);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
}
.th-policy-card h3 {
  font-size: 15.5px !important;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.th-policy-card p { color: var(--gray); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ============================================================================
   15. HOMEPAGE — FAQ (native <details>, no JS)
   Ported from sindex .vpol.
   ============================================================================ */
.th-faq,
.th-vpol {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  overflow: hidden;
}
.th-faq > details,
.th-vpol > details { border-bottom: 1px solid var(--line); }
.th-faq > details:last-child,
.th-vpol > details:last-child { border-bottom: 0; }
.th-faq summary,
.th-vpol summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.th-faq summary::-webkit-details-marker,
.th-vpol summary::-webkit-details-marker { display: none; }
.th-faq summary:hover,
.th-vpol summary:hover { background: var(--surface2); }
.th-faq summary::after,
.th-vpol summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--gray-soft);
  border-bottom: 1.6px solid var(--gray-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.th-faq > details[open] summary::after,
.th-vpol > details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.th-faq-body,
.th-faq .body,
.th-vpol .body {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gray);
  max-width: 78ch;
}

/* ============================================================================
   16. FOOTER — white, one top hairline (the black slab is gone)
   Ported from sindex footer.site.
   ============================================================================ */
.pkp_structure_footer_wrapper {
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--gray);
}
.pkp_structure_footer_wrapper a { color: var(--gray); text-decoration: none; }
.pkp_structure_footer_wrapper a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; opacity: 1; }
.pkp_brand_footer { display: none; }

.th-footer {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 56px var(--gutter);
}

.th-f-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.th-f-mark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.th-f-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.th-f-badges li {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.th-f-badges li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray-soft);
  flex: none;
}

.th-f-cols {
  display: grid;
  gap: 40px 32px;
  margin-top: 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .th-f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .th-f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.5fr; } }
.th-f-cols h2,
.th-f-cols h3 {
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 12px;
  text-transform: none;
}
.th-f-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.th-f-cols li { margin: 0; }
.th-f-cols a, .th-f-cols p { font-size: 13.5px; color: var(--gray); }
.th-f-cols p { margin: 0 0 8px; }

.th-f-contact address { font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--gray); }
.th-f-contact .th-f-org { display: block; color: var(--ink); font-weight: 500; }

.th-f-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
}
.th-f-bottom p, .th-f-bottom span {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray);
  max-width: 70ch;
}

/* Legacy footer class names (pre-Phase-B markup) mapped onto the light footer
   so the transition never leaves white text on a white ground. */
.th-footer-grid {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .th-footer-grid { grid-template-columns: 1.4fr 1.1fr 1fr 0.8fr; } }
.th-footer-brand { font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--ink); }
.th-footer-tag { font-size: 13.5px; line-height: 1.6; margin-top: 8px; color: var(--gray); }
.th-footer-h {
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 12px;
}
.th-footer-col p { margin: 0 0 8px; font-size: 13.5px; color: var(--gray); }
.th-footer-issn { font-family: var(--font-mono); font-size: 12.5px; color: var(--gray-soft); }
.th-footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--gray);
}
.th-footer-ojs { color: var(--gray) !important; }

/* ============================================================================
   17. INNER PAGES — forms, login, register
   ============================================================================ */
.pkp_page_login .pkp_structure_main,
.pkp_page_user.pkp_op_register .pkp_structure_main {
  max-width: 30rem !important;
  margin: 0 auto !important;
  padding: 56px var(--gutter) 80px !important;
  float: none !important;
  width: auto !important;
}
.pkp_page_user.pkp_op_register .pkp_structure_main { max-width: 36rem !important; }
.pkp_page_login .pkp_structure_content,
.pkp_page_user.pkp_op_register .pkp_structure_content { display: block; }
.pkp_page_login .pkp_structure_sidebar,
.pkp_page_user.pkp_op_register .pkp_structure_sidebar { display: none; }

.cmp_form, .pkp_form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-card);
  padding: 28px 26px;
}
.cmp_form .fields, .pkp_form .fields { margin: 0; }
.cmp_form label, .pkp_form label,
.cmp_form .label, .pkp_form .label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="search"],
.cmp_form input[type="tel"],
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="url"],
.pkp_form input[type="search"],
.pkp_form input[type="tel"],
.cmp_form select, .pkp_form select,
.cmp_form textarea, .pkp_form textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);       /* r6 — no more 999px inputs */
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.cmp_form input:focus, .pkp_form input:focus,
.cmp_form select:focus, .pkp_form select:focus,
.cmp_form textarea:focus, .pkp_form textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: var(--primary);
}
.cmp_form textarea, .pkp_form textarea { line-height: 1.6; }

.cmp_form .buttons button, .pkp_form .buttons button,
.cmp_form button[type="submit"], .pkp_form button[type="submit"],
.cmp_button, .pkp_button, button.submit {
  background: var(--btn);
  color: #fff;
  border: 1px solid var(--btn);
  border-radius: var(--r-ctl);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.cmp_form .buttons button:hover, .pkp_form .buttons button:hover,
.cmp_button:hover, .pkp_button:hover, button.submit:hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  opacity: 1;
}
.cmp_form a, .pkp_form a { color: var(--primary); }

/* ============================================================================
   18. INNER PAGES — breadcrumbs, sidebar, issue TOC, article
   ============================================================================ */
.cmp_breadcrumbs,
.cmp_breadcrumbs .current,
.cmp_breadcrumbs .separator { color: var(--gray-soft) !important; font-size: 13px; }
.cmp_breadcrumbs a { color: var(--gray) !important; }
.cmp_breadcrumbs a:hover { color: var(--ink) !important; }

.pkp_structure_sidebar .pkp_block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.pkp_structure_sidebar .title {
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
}

/* Sidebar badge block — content lives in a DB-stored custom block, keep it */
.th-side-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.th-side-badges li { margin: 0; }
.th-side-badges a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);       /* was a pill */
  background: var(--paper);
  text-decoration: none;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 13.5px;
  transition: border-color var(--dur-card) var(--ease-standard), background-color var(--dur-card) var(--ease-standard);
}
.th-side-badges a:hover { border-color: var(--line-hover); background: var(--surface); text-decoration: none; }
.th-side-badges .th-meta { font-size: 9.5px; }

/* ── Current issue / TOC ── */
.current_issue { border-top: 1px solid var(--line); }
.current_issue_title {
  font-family: var(--font-mono);
  color: var(--gray-soft);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 12px 0 20px;
}
.obj_issue_toc .title { color: var(--ink); }
.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3,
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.obj_issue_toc .section { border-top: none; }
.obj_issue_toc .published, .obj_issue_toc .description { color: var(--gray); }
.read_more { color: var(--primary); font-weight: 600; }

.obj_article_summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: border-color var(--dur-card) var(--ease-standard), box-shadow var(--dur-card) var(--ease-standard);
}
.obj_article_summary:hover { border-color: var(--line-hover); }
.obj_article_summary .title a {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.obj_article_summary .title a:hover { color: var(--primary); text-decoration: none; opacity: 1; }
.obj_article_summary .meta,
.obj_article_summary .authors { color: var(--gray); font-size: 14px; }
.obj_article_summary .pages,
.obj_issue_toc .pages {
  font-family: var(--font-mono);
  color: var(--gray-soft) !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Article page ── */
.obj_article_details .item .label {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.obj_article_details .item .value,
.obj_article_details .item { color: var(--gray); }
.obj_article_details .item .value a,
.obj_article_details .authors a { color: var(--primary); }
.obj_article_details .item .value a:hover { color: var(--primary-hover); opacity: 1; }
.obj_article_details .row,
.obj_article_details .main_entry,
.obj_article_details .entry_details { border-color: var(--line); }
.obj_article_details .entry_details .item { border-bottom-color: var(--line); }
.obj_article_details .abstract { max-width: 736px; line-height: 1.7; }

.item.keywords .value {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4em .5em;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-ctl);       /* was a pill */
  padding: .3em .8em;
  color: var(--gray);
  font-weight: 500;
}

.item.citation_display .value, #citationOutput, .csl-entry {
  color: var(--gray);
  background: transparent;
}
.item.citation_display .label, .citation_formats_button { color: var(--ink) !important; }
.citation_formats {
  background: var(--paper);
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.citation_formats_styles a { color: var(--gray); border-bottom-color: var(--line) !important; }
.citation_formats_styles a:hover { color: var(--ink); background: var(--surface); }

/* ── PDF galley button ── */
.galleys_links { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.galleys_links li { margin: 0; }
.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--btn);
  border-radius: var(--r-ctl);       /* was a pill */
  font-weight: 600;
  font-size: 14px;
  color: #fff !important;
  text-decoration: none;
  background: var(--btn);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.obj_galley_link::before {
  content: "";
  width: 15px; height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ctext x='12' y='18' font-size='7' font-weight='700' text-anchor='middle' fill='%23000'%3EPDF%3C/text%3E%3C/svg%3E");
          mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ctext x='12' y='18' font-size='7' font-weight='700' text-anchor='middle' fill='%23000'%3EPDF%3C/text%3E%3C/svg%3E");
}
.obj_galley_link:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff !important; text-decoration: none; opacity: 1; }
.obj_galley_link.restricted { background: var(--surface2); border-color: var(--line-strong); color: var(--gray) !important; }

/* ── Site-level landing (indexSite.tpl) — minimal mapping onto the new scale ── */
.th-jhero { background: var(--paper); padding-block: var(--sec-py); }
.th-jhero-inner { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: 32px; }
.th-jhero-title { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 16px; }
.th-jhero-founder { font-size: 18px; line-height: 1.65; color: var(--gray); max-width: 62ch; }
.themis-landing .th-section,
.themis-journal .th-section { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================================
   19. REDUCED MOTION — both blocks, ported verbatim
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Zeroing the duration still let the SHIFT happen — kill the displacement
     outright, not just its timing. */
  .reveal-armed, .sx-reveal { opacity: 1 !important; transform: none !important; }
  .lift:hover, .lift:focus-within,
  .press:active,
  .th-policy-card:hover, .th-policy-card:focus-visible,
  .th-btn:active,
  .lift:hover .art, .lift:focus-within .art { transform: none !important; }
  .sx-marquee-track, .th-marquee-track { animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}