/* =============================================================================
   IA MODERN - Innovative Academy journals (OJS 3.4 child theme)
   -----------------------------------------------------------------------------
   Design read: redesign-preserve of a scholarly journal site for researchers,
   editors and indexing assessors. Calm editorial language, native CSS on top of
   legacy OJS markup, brand navy #08457E, Apple-first system typography.
   Dials: DESIGN_VARIANCE 4 / MOTION_INTENSITY 3 / VISUAL_DENSITY 5.

   Why this file overrides so much:
   OJS 3.4 ships a fixed-pixel float grid in the parent stylesheet:
       .pkp_structure_content, .pkp_structure_footer { width: 728/952/1160px }
       .pkp_structure_main    { float:left; width: 652/860px; }
       .pkp_structure_main::before/::after { 1px vertical rules at 0 and 652px }
       .pkp_structure_footer  { text-align: center }
       html, body { font-size: 14px }
   Section 3 replaces that with one responsive container. Everything else is
   built on the tokens in section 1.

   File map
     1  Tokens
     2  Base and typography
     3  Layout foundation (the OJS grid teardown)
     4  Header, navigation, language and user menus
     5  Footer
     6  Primitives: links, buttons, chips, callouts, tables, forms, pagination
     7  Home: hero, sections, editor card, current issue, indexing band, policies
     8  Article page
     9  Long-form pages: policy, legal, about, contact
     10 Listings: archive, announcements, search, editorial board
     11 Auth: login and register
     12 Motion and reduced motion
   ========================================================================== */

/* =============================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- brand and neutrals ------------------------------------------------- */
  --th-canvas: #FFFFFF;
  --th-card: #F5F6F8;             /* light surface: nav pills, quiet cards   */
  --th-mist: #FAFBFC;             /* faintest surface: callouts, abstract    */
  --th-ink: #0A0F14;              /* primary text                            */
  --th-ink-2: #3E4A57;            /* body text, 8.0:1 on white               */
  --th-smoke: rgba(10, 25, 41, 0.60); /* metadata, 5.4:1 on white            */
  --th-hairline: rgba(8, 69, 126, 0.14);
  --th-hairline-strong: rgba(8, 69, 126, 0.28);
  --th-accent: #08457E;           /* Innovative Academy navy, fixed          */
  --th-accent-hover: #063560;
  --th-accent-soft: #EAF2FA;      /* 8% navy wash                            */
  --th-dark: #08457E;             /* inverted bands and footer               */
  --th-dark-deep: #062F57;
  --th-ink-inv: #FFFFFF;
  --th-ink-inv-dim: rgba(255, 255, 255, 0.72);
  --th-ok: #1B7A43;               /* open-access affirmative, 4.6:1 on white */
  --th-ok-soft: #EAF7EF;

  /* --- typography --------------------------------------------------------- */
  --th-font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --th-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* 7-step scale, unchanged from the previous build */
  --fs-caption: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h3: 20px;
  --fs-h2: clamp(24px, 2.6vw, 34px);
  --fs-h1: clamp(34px, 5vw, 64px);
  /* long-form body sits one notch above UI body for reading comfort */
  --fs-prose: 1.0625rem;
  --tracking-tight: -0.022em;
  --tracking-body: -0.006em;

  /* --- spacing scale (4px base) ------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 2rem;     --sp-8: 2.5rem;
  --sp-9: 3rem;     --sp-10: 4rem;    --sp-11: 5rem;    --sp-12: 6rem;

  /* --- radii: one system -------------------------------------------------
     pill    -> anything interactive (buttons, chips, inputs, nav pills)
     surface -> panels, cards, callouts, media frames
     inner   -> elements nested inside a surface (menu rows, thumbnails)     */
  --r-pill: 999px;
  --r-surface: 14px;
  --r-inner: 8px;

  /* --- elevation: navy-tinted, two steps ---------------------------------- */
  --sh-1: 0 1px 2px rgba(8, 69, 126, 0.06), 0 10px 26px -18px rgba(8, 69, 126, 0.32);
  --sh-2: 0 24px 60px -28px rgba(8, 69, 126, 0.36);

  /* --- layout frame -------------------------------------------------------
     page     outer container for every inner page
     main     default column inside the frame
     measure  reading column, about 72ch at --fs-prose
     rail     article sidebar and long-form contents rail                    */
  --ia-page: 72rem;
  --ia-main: 62rem;
  --ia-measure: 44rem;
  --ia-rail: 15rem;
  --ia-gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* frames include their own gutter so the container can centre itself */
  --ia-frame-page: calc(var(--ia-page) + 2 * var(--ia-gutter));
  --ia-frame-main: calc(var(--ia-main) + 2 * var(--ia-gutter));
  --ia-frame-read: calc(var(--ia-measure) + 2 * var(--ia-gutter));
  --ia-head: 62px;               /* sticky header height, for scroll offsets */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* legacy aliases kept so older inline content keeps resolving */
  --th-radius-card: var(--r-surface);
  --th-radius-btn: var(--r-pill);
  --th-max: var(--ia-page);
  --th-section-gap: var(--sp-11);
}

/* =============================================================================
   2. BASE AND TYPOGRAPHY
   ========================================================================== */
/* the parent sheet sets html{font-size:14px}; every rem token here is designed
   against a 16px root, so restore it */
html {
  background: var(--th-canvas);
  font-size: 16px !important;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ia-head) + var(--sp-4));
}
body {
  background: var(--th-canvas);
  color: var(--th-ink);
  font-family: var(--th-font-body);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: clip; }

/* the parent sets Noto Sans on every heading inside .pkp_structure_main */
.pkp_structure_page :is(h1, h2, h3, h4, h5, .title, .label, .page_title),
.pkp_structure_main :is(h1, h2, h3, h4, h5, .title, .label, .page_title) {
  font-family: var(--th-font-body) !important;
  letter-spacing: var(--tracking-tight);
  color: var(--th-ink);
}
.pkp_structure_main :is(h1, h2, h3) { line-height: 1.25; }
.pkp_structure_main, .pkp_structure_main p, .pkp_structure_main li { color: var(--th-ink-2); }

.pkp_structure_page, .pkp_structure_main { background: transparent; }

h2.th-h2 {
  font-size: var(--fs-h2) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.page_title {
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 600;
  line-height: 1.15 !important;
  margin: 0 0 var(--sp-6);
}
/* the parent gives h1 a 2.857rem top margin; the page frame owns that space */
.pkp_structure_main .page > h1:first-of-type,
.pkp_structure_main .page > .page_title { margin-top: 0; }

.th-meta,
.current_issue_title,
.th-footer-h,
.obj_article_details .item .label,
.iam-issue-date,
.obj_announcement_summary .date {
  font-family: var(--th-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-smoke);
}

/* accessible focus everywhere, never removed */
:focus-visible {
  outline: 2px solid var(--th-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================================================================
   3. LAYOUT FOUNDATION  (replaces the OJS fixed-pixel float grid)
   -----------------------------------------------------------------------------
   .pkp_structure_content  responsive page frame, grid, centred
   .pkp_structure_main     the content column, no float, no phantom rules
   .page                   the reading column: capped and centred, so text
                           pages are symmetric instead of hugging the left
   Wide page types opt out of the reading cap and use the whole frame.
   ========================================================================== */
.pkp_structure_page { width: 100%; max-width: none; }

/* The container carries the page width, not the column inside it: a grid item
   with auto inline margins is sized to its content, which makes grid children
   collapse. The container is a normal block, so margin-inline:auto centres it
   predictably. Default frame is the reading measure; wide pages opt up.      */
.pkp_structure_content {
  width: 100% !important;
  max-width: var(--ia-frame-read);
  margin: 0 auto !important;
  padding: 0 var(--ia-gutter) !important;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--sp-9);
  align-items: start;
}
/* the legacy clearfix pseudo-elements would become stray grid items */
.pkp_structure_content::before,
.pkp_structure_content::after { content: none !important; display: none !important; }

/* OJS renders the sidebar only when a block plugin is active */
.pkp_structure_content.has_sidebar {
  max-width: var(--ia-frame-page);
  grid-template-columns: minmax(0, 1fr) 18rem;
}

.pkp_structure_main {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: var(--sp-8) 0 var(--sp-12) !important;
  box-sizing: border-box;
}
/* the 1px vertical rules the parent draws at left:0 and left:652px */
.pkp_structure_main::before,
.pkp_structure_main::after { content: none !important; display: none !important; }

.pkp_structure_sidebar {
  float: none !important;
  width: auto !important;
  padding-top: var(--sp-8);
}

/* --- frame per page type --------------------------------------------------
   Capping the container (not the inner .page) keeps the breadcrumb aligned:
   static pages render it outside .page, core OJS pages render it inside.
   Body classes cover the core page types; the :has() rules cover pages whose
   content is authored in the database.                                       */
.pkp_page_article .pkp_structure_content,
.pkp_page_issue .pkp_structure_content,
.pkp_page_search .pkp_structure_content,
.pkp_page_announcement .pkp_structure_content,
.pkp_structure_content:has(.ia-eb-grid),
.pkp_structure_content:has(.th-policy-grid) { max-width: var(--ia-frame-page); }

/* a long policy page with a contents rail: rail plus measure, exactly */
.pkp_structure_content:has(.ia-toc) { max-width: var(--ia-frame-main); }

/* content authored in the database can carry its own grid */
.ia-policy-page:has(.ia-eb-grid) { max-width: none; }

/* --- journal home: full bleed -------------------------------------------- */
.pkp_page_index .pkp_structure_content {
  display: block;
  max-width: none;
  padding: 0 !important;
}
.pkp_page_index .pkp_structure_main { max-width: none; padding: 0 !important; }
.pkp_page_index .pkp_structure_sidebar { display: none; }

/* =============================================================================
   4. HEADER, NAVIGATION
   ========================================================================== */
:root {
  --cf-head-bg: rgba(255, 255, 255, 0.86);
  --cf-ink: var(--th-ink);
  --cf-ink-dim: rgba(10, 25, 41, 0.66);
  --cf-menu-bg: #FFFFFF;
  --cf-btn-bg: var(--th-card);
}

.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(--cf-head-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.cf-head-inner {
  display: flex; align-items: center; gap: var(--sp-5);
  max-width: none; margin: 0;
  padding: var(--sp-3) var(--ia-gutter);
}

.cf-brand { flex: 0 0 auto; }
.pkp_site_name .is_img img { display: none; }
.th-brand { display: flex; align-items: center; text-decoration: none; }
.th-brand-logo { display: block; height: 38px; width: auto; }

.cf-nav { display: flex; align-items: center; }
ul.pkp_navigation_primary.cf-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: var(--sp-1);
  background: var(--th-card); border-radius: var(--r-pill);
}
.cf-menu > li { position: relative; }
.cf-menu > li > a {
  display: block; padding: 0.42rem 0.9rem; border-radius: var(--r-pill);
  color: var(--cf-ink-dim) !important; font-weight: 500; font-size: 0.85rem;
  text-decoration: none; white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.cf-menu > li > a:hover { color: #fff !important; background: var(--th-accent); }
.cf-menu li ul {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  max-width: min(640px, 80vw);
  background: var(--cf-menu-bg);
  border: 1px solid var(--th-hairline); border-radius: var(--r-surface);
  box-shadow: var(--sh-1);
  padding: var(--sp-1); margin-top: var(--sp-2); list-style: none;
  z-index: 60;
  max-height: 70vh; overflow: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .3s;
}
/* long submenus (About) spread over two columns instead of scrolling */
.cf-menu li ul:has(li:nth-child(9)) {
  min-width: 520px;
  column-count: 2; column-gap: var(--sp-1);
  max-height: none; overflow: visible;
}
.cf-menu li ul:has(li:nth-child(9)) li { break-inside: avoid; }
/* transparent hover bridge across the gap between pill and panel */
.cf-menu > li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.cf-sub-toggle { display: none; }   /* accordion toggles are mobile only */
.cf-menu > li:hover > ul, .cf-menu > li:focus-within > ul {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.cf-menu li ul a {
  display: block; padding: 0.5rem 0.8rem; border-radius: var(--r-inner);
  color: var(--cf-ink) !important; font-size: 0.87rem; text-decoration: none;
}
.cf-menu li ul a:hover { background: var(--cf-btn-bg); }

.cf-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.th-search-form { display: flex; align-items: center; }
.th-search-input {
  width: 140px; padding: 0.45rem 0.95rem;
  border: 1px solid var(--th-hairline); border-radius: var(--r-pill);
  background: #fff; color: var(--th-ink);
  font: inherit; font-size: 0.85rem;
  transition: width .25s var(--ease), border-color .2s ease;
}
.th-search-input:focus { width: 200px; border-color: var(--th-accent); outline: none; }
.th-search-input::placeholder { color: var(--th-smoke); }

.cf-lang { position: relative; }
.cf-lang-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.42rem 0.85rem; border-radius: var(--r-pill);
  background: var(--th-card); border: none;
  color: var(--cf-ink) !important; font: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
}
.cf-lang-btn:hover { background: #E9EDF2; }
.cf-caret { font-size: 0.7rem; opacity: 0.7; }
.cf-lang-menu {
  position: absolute; top: 100%; right: 0; min-width: 170px;
  background: var(--cf-menu-bg);
  border: 1px solid var(--th-hairline); border-radius: var(--r-surface);
  box-shadow: var(--sh-1);
  padding: var(--sp-1); margin-top: var(--sp-2); list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.cf-lang:hover .cf-lang-menu, .cf-lang:focus-within .cf-lang-menu,
.cf-lang-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.cf-lang-menu a {
  display: block; padding: 0.5rem 0.8rem; border-radius: var(--r-inner);
  color: var(--cf-ink) !important; font-size: 0.88rem; text-decoration: none;
}
.cf-lang-menu a:hover { background: var(--cf-btn-bg); }
.cf-lang-menu .is-current a { font-weight: 700; }

/* the parent pins .pkp_navigation_user to the old 1160px grid width, which
   pushed the header actions 700px past the viewport (clipped, but it broke the
   flex distribution in the bar) */
.cf-user { position: relative; }
ul.pkp_navigation_user.cf-user-menu,
ul.pkp_navigation_primary.cf-menu { width: auto !important; }
ul.pkp_navigation_user.cf-user-menu {
  display: flex; align-items: center; gap: var(--sp-1);
  list-style: none; margin: 0; padding: 0;
}
.cf-user-menu > li { position: relative; }
.cf-user-menu > li > a {
  display: block; padding: 0.45rem 0.95rem; border-radius: var(--r-pill);
  color: var(--cf-ink-dim) !important; font-weight: 500; font-size: 0.85rem;
  text-decoration: none; white-space: nowrap;
}
.cf-user-menu > li > a:hover { color: var(--th-ink) !important; background: var(--cf-btn-bg); }
/* only the Login action gets the navy CTA pill, never Logout */
.cf-user-menu a[href*="/login"]:not([href*="signOut"]) {
  background: var(--th-accent); color: #fff !important; font-weight: 500;
}
.cf-user-menu a[href*="/login"]:not([href*="signOut"]):hover {
  background: var(--th-accent-hover); color: #fff !important;
}
.cf-user-menu li ul {
  position: absolute; top: 100%; right: 0; min-width: 200px;
  background: #fff;
  border: 1px solid var(--th-hairline); border-radius: var(--r-surface);
  box-shadow: var(--sh-1);
  padding: var(--sp-1); margin-top: var(--sp-2); list-style: none; z-index: 60;
}
.cf-user-menu li ul a {
  display: block; padding: 0.5rem 0.8rem; border-radius: var(--r-inner);
  color: var(--th-ink) !important; font-size: 0.87rem; text-decoration: none;
  background: transparent;
}
.cf-user-menu li ul a:hover { background: var(--cf-btn-bg); }

.cf-burger {
  display: none; position: static; float: none;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.cf-burger span {
  display: block; width: 24px; height: 2px; background: var(--cf-ink);
  margin: 5px 0; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s ease;
}
.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); }

/* --- mobile: burger + per-item accordion (class hooks used by iamodern.js) */
@media (max-width: 1080px) {
  .cf-menu li ul, .cf-menu > li:hover > ul, .cf-menu > li:focus-within > ul {
    display: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
    box-shadow: none;
  }
  .cf-menu > li.is-open > ul { display: block; }
  .cf-menu > li::after { display: none; }
  .cf-menu > li { display: flex; flex-wrap: wrap; align-items: center; }
  .cf-menu > li > a { flex: 1 1 auto; }
  .cf-menu > li > ul { flex-basis: 100%; }
  .cf-sub-toggle {
    display: block; flex: 0 0 auto;
    background: none; border: 0; cursor: pointer;
    padding: 0.55rem 0.9rem; color: var(--cf-ink-dim);
    font-size: 0.8rem; line-height: 1;
    transition: transform .2s ease;
  }
  .cf-menu > li.is-open > .cf-sub-toggle { transform: rotate(180deg); color: var(--th-accent); }
  .cf-head-inner { flex-wrap: wrap; column-gap: var(--sp-3); row-gap: 0; padding: 0.7rem 1.1rem; }
  .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 .3s ease;
  }
  .cf-head.cf-open .cf-nav {
    max-height: 74vh; overflow: auto;
    padding: 0.9rem 0 0.4rem; border-top: 1px solid var(--th-hairline); margin-top: 0.4rem;
  }
  .cf-head.cf-open .cf-actions { max-height: 44vh; overflow: visible; padding: 0.2rem 0 0.9rem; }
  ul.pkp_navigation_primary.cf-menu {
    flex-direction: column; align-items: stretch; gap: 2px; width: 100%;
    background: transparent; border-radius: 0; padding: 0;
  }
  .cf-menu > li { width: 100%; }
  .cf-menu > li > a { padding: 0.7rem 0.5rem; font-size: 1rem; }
  .cf-menu > li > a:hover { color: var(--th-ink) !important; background: var(--cf-btn-bg); }
  .cf-menu li ul {
    position: static; border: none; background: transparent;
    margin: 2px 0 var(--sp-2) var(--sp-4); padding: 0; min-width: 0;
  }
  /* the two-column desktop submenu would overflow the accordion sideways */
  .cf-menu li ul:has(li:nth-child(9)) {
    min-width: 0; max-width: none; column-count: 1;
  }
  .cf-actions { margin-left: 0; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-start; }
  .th-search-input, .th-search-input:focus { width: 100%; }
  .th-search-form { width: 100%; }
  .cf-lang { width: 100%; }
  .cf-lang-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; background: transparent;
    padding: 0.2rem 0 0 0.8rem; margin: 0.3rem 0 0;
  }
  .cf-user-menu { flex-wrap: wrap; gap: var(--sp-2); }
}
@media (max-width: 480px) { .th-brand-logo { height: 30px; } }

/* =============================================================================
   5. FOOTER
   ========================================================================== */
.pkp_structure_footer_wrapper {
  background: linear-gradient(135deg, var(--th-dark) 0%, var(--th-dark-deep) 100%) !important;
  border-top: none;
  color: var(--th-ink-inv-dim);
}
.pkp_structure_footer_wrapper a { color: #fff; }
.pkp_structure_footer_wrapper a:hover { opacity: 0.78; }
/* the parent pins the footer to 1160px and centres its text */
.th-footer, .pkp_structure_footer {
  width: 100% !important;
  max-width: var(--ia-frame-page);
  margin: 0 auto !important;
  padding: var(--sp-10) var(--ia-gutter) var(--sp-6) !important;
  text-align: left;
  box-sizing: border-box;
}
.th-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.th-footer-brand { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; color: #fff; }
.th-footer-tag { font-size: 0.88rem; line-height: 1.6; margin-top: var(--sp-2); max-width: 26rem; }
.th-footer-h {
  font-size: 10.5px !important;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.56);
  margin: 0 0 var(--sp-3);
}
.th-footer-col p { margin: 0 0 var(--sp-2); font-size: 0.9rem; }
.th-footer-issn { font-family: var(--th-font-mono); font-size: 0.8rem; margin-top: var(--sp-3); }
.th-footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-3); padding-top: var(--sp-5); font-size: 0.8rem;
}
.th-footer-ojs { color: var(--th-ink-inv-dim) !important; }
.pkp_brand_footer { display: none; }
/* the journal pageFooter setting injects its own box; the theme renders its own */
.pkp_footer_content .ia-footer { display: none; }
@media (max-width: 900px) { .th-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .th-footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* =============================================================================
   6. PRIMITIVES
   ========================================================================== */

/* --- links ---------------------------------------------------------------- */
.pkp_structure_main a { color: var(--th-accent); text-decoration-color: var(--th-hairline-strong); }
.pkp_structure_main a:hover {
  color: var(--th-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.read_more { color: var(--th-accent); font-weight: 600; }

/* --- breadcrumbs ---------------------------------------------------------- */
.cmp_breadcrumbs { margin: 0 0 var(--sp-6); font-size: var(--fs-small); }
.cmp_breadcrumbs ol { margin: 0; padding: 0; list-style: none; }
.cmp_breadcrumbs li { display: inline; }
.cmp_breadcrumbs, .cmp_breadcrumbs .current, .cmp_breadcrumbs .separator { color: var(--th-smoke) !important; }
.cmp_breadcrumbs a { color: var(--th-ink-2) !important; text-decoration: none; }
.cmp_breadcrumbs a:hover { color: var(--th-accent) !important; text-decoration: underline; }
.cmp_breadcrumbs .separator { padding: 0 var(--sp-2); }

/* --- buttons: one pill family -------------------------------------------- */
.th-btn,
.cmp_button, .pkp_button, button.submit,
.cmp_form .buttons button, .pkp_form .buttons button,
.cmp_form button[type="submit"], .pkp_form button[type="submit"],
.page_search .submit button,
.block_make_submission a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--th-accent);
  color: #fff !important;
  font-family: var(--th-font-body);
  font-weight: 500; font-size: 0.9rem; line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, border-color .18s ease;
}
.th-btn:hover,
.cmp_button:hover, .pkp_button:hover, button.submit:hover,
.cmp_form .buttons button:hover, .pkp_form .buttons button:hover,
.page_search .submit button:hover, .block_make_submission a:hover {
  background: var(--th-accent-hover); color: #fff !important; box-shadow: none;
}
.th-btn:active, .cmp_button:active, button.submit:active { transform: translateY(1px); }
.th-btn { margin: 0 var(--sp-2) var(--sp-2) 0; }
.th-btn-dark { background: var(--th-accent); color: #fff !important; }
.th-btn-dark:hover { background: var(--th-accent-hover); }
.th-btn-ghost {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--th-hairline-strong);
  color: var(--th-accent) !important;
}
.th-btn-ghost:hover { background: var(--th-accent-soft); color: var(--th-accent) !important; }
/* the parent bolts a FontAwesome glyph onto the search submit and it lands on
   top of the label; drop it and let the pill speak */
.page_search .submit button { padding-left: 1.5rem !important; padding-right: 1.5rem !important; border: none; }
.page_search .submit button::after { content: none !important; display: none !important; }
.page_search .submit { text-align: right; }

/* --- chips and tags ------------------------------------------------------- */
.iam-chip, .th-tag {
  display: inline-flex; align-items: center;
  max-width: min(100%, 34rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--th-mist);
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: var(--fs-caption); font-weight: 600;
  color: var(--th-ink-2) !important;
  text-decoration: none !important;
}
a.iam-chip { transition: border-color .15s ease, color .15s ease; }
a.iam-chip:hover { border-color: var(--th-accent); color: var(--th-accent) !important; }
.iam-chip-doi { background: var(--th-accent-soft); color: var(--th-accent) !important; border-color: transparent; }
.iam-chip-oa {
  background: var(--th-ok-soft); color: var(--th-ok) !important;
  border-color: rgba(27, 122, 67, 0.24);
}
.th-tag { background: #fff; color: var(--th-accent) !important; padding: 7px 14px; font-size: 11px; font-weight: 500; }

/* --- callouts and notifications ------------------------------------------ */
.cmp_notification, .pkp_notification, .notice, .ia-scope {
  background: var(--th-mist);
  border: 1px solid var(--th-hairline);
  border-left: 3px solid var(--th-accent);
  border-radius: var(--r-surface);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
  color: var(--th-ink-2);
  font-size: var(--fs-small);
  line-height: 1.65;
}
.cmp_notification p:last-child, .ia-scope p:last-child { margin-bottom: 0; }
.ia-note { font-size: var(--fs-small); color: var(--th-smoke); }
.ia-updated { font-size: var(--fs-caption); color: var(--th-smoke); }

/* --- tables ---------------------------------------------------------------
   iamodern.js wraps every content table in .ia-table-wrap so wide tables
   scroll inside their own frame instead of pushing the page sideways.      */
.ia-table-wrap {
  overflow-x: auto;
  margin: var(--sp-5) 0 var(--sp-7);
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-surface);
  -webkit-overflow-scrolling: touch;
}
.pkp_structure_main table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  margin: 0;
}
.ia-table-wrap > table { min-width: 30rem; }
.pkp_structure_main :is(th, td) {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--th-hairline);
  vertical-align: top;
}
.pkp_structure_main th {
  background: var(--th-card);
  font-weight: 600;
  color: var(--th-ink);
  white-space: nowrap;
}
.pkp_structure_main tr:last-child td { border-bottom: none; }

/* --- forms ---------------------------------------------------------------- */
.cmp_form, .pkp_form {
  background: #fff;
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-surface);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--sh-1);
  width: 100%;
  box-sizing: border-box;
}
.cmp_form .fields, .pkp_form .fields { margin: 0; }
.cmp_form fieldset, .pkp_form fieldset {
  border: none; padding: 0; margin: 0 0 var(--sp-5); min-width: 0;
}
.cmp_form legend, .pkp_form legend {
  padding: 0; margin-bottom: var(--sp-3);
  font-size: var(--fs-small); font-weight: 600; color: var(--th-ink);
}
/* the parent spaces every field with 2.143rem of bottom padding */
.cmp_form .fields > div, .pkp_form .fields > div { padding-bottom: var(--sp-5); }
/* the parent renders validation as a red absolute-positioned tag */
.cmp_form .fields > div .error, .pkp_form .fields > div .error {
  position: static; padding: 0; background: none;
  color: #A32020; font-weight: 500; font-size: var(--fs-small); line-height: 1.5;
}
.cmp_form label, .pkp_form label,
.cmp_form .label, .pkp_form .label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: 0.82rem; font-weight: 500; color: var(--th-ink-2);
}
.cmp_form :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], select),
.pkp_form :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], select) {
  width: 100%;
  min-height: 44px;
  background: #fff;
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-pill);
  padding: 0.6rem 1.1rem;
  font: inherit; font-size: 15px;
  color: var(--th-ink);
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cmp_form textarea, .pkp_form textarea {
  width: 100%; background: #fff;
  border: 1px solid var(--th-hairline); border-radius: var(--r-surface);
  padding: 0.7rem 1rem; font: inherit; box-sizing: border-box;
}
.cmp_form :is(input, select, textarea):focus,
.pkp_form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--th-accent);
  box-shadow: 0 0 0 4px rgba(8, 69, 126, 0.14);
}
.cmp_form ::placeholder, .pkp_form ::placeholder { color: var(--th-smoke); }
.cmp_form input[type="checkbox"], .cmp_form input[type="radio"] {
  width: 1.05rem; height: 1.05rem; min-height: 0; accent-color: var(--th-accent);
}
.cmp_form .buttons, .pkp_form .buttons {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.cmp_form .buttons a, .pkp_form .buttons a { margin: 0; font-size: 0.9rem; font-weight: 500; }
.cmp_form a, .pkp_form a { color: var(--th-accent); }
.cmp_form .error, .pkp_form .error, .pkp_form .pkp_form_error {
  display: block; margin-top: var(--sp-1);
  color: #A32020; font-size: var(--fs-small);
}
.cmp_form .required, .pkp_form .required { color: #A32020; }

/* --- pagination ----------------------------------------------------------- */
.cmp_pagination {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-8) 0 0;
  font-size: var(--fs-small); color: var(--th-smoke);
}
.cmp_pagination a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--th-hairline); border-radius: var(--r-pill);
  color: var(--th-accent); text-decoration: none; font-weight: 500;
}
.cmp_pagination a:hover { border-color: var(--th-accent); background: var(--th-accent-soft); text-decoration: none; }

/* --- sidebar blocks ------------------------------------------------------- */
.pkp_structure_sidebar .pkp_block {
  background: var(--th-card);
  border: none;
  border-radius: var(--r-surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.pkp_structure_sidebar .title { color: var(--th-ink); font-weight: 600; font-size: var(--fs-small); }

/* =============================================================================
   7. HOME
   ========================================================================== */
.iam-journal h1, .iam-journal h2, .iam-journal h3 {
  font-family: var(--th-font-body) !important;
  line-height: 1.12 !important;
}

.th-section {
  max-width: var(--ia-frame-page); margin: 0 auto;
  padding: var(--sp-11) var(--ia-gutter);
  position: relative;
}
.th-section + .th-section { padding-top: 0; }
.th-kicker {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--th-smoke);
  margin-bottom: var(--sp-4);
}
.th-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--th-accent); flex: none;
}

/* --- hero: full-viewport scrub video + typewriter ------------------------- */
.th-hero2 {
  position: relative;
  min-height: calc(100dvh - var(--ia-head));
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--th-canvas);
}
.iam-hero-media { position: absolute; inset: 0; z-index: 0; }
.iam-hero-media video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: right bottom;
}
.iam-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 38%, rgba(255,255,255,0.12) 68%, transparent 100%);
  pointer-events: none;
}
.iam-hero-body {
  position: relative; z-index: 30;
  background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.82) 55%, transparent 100%);
  padding: var(--sp-11) var(--ia-gutter) var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.iam-hero-title {
  font-weight: 300 !important;
  font-size: clamp(2rem, 5.2vw, 4.4rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: var(--th-ink);
  margin: 0; min-height: 1.1em; max-width: 60rem;
}
.iam-caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--th-accent); vertical-align: middle; margin-left: 3px;
  animation: iam-blink 1s step-end infinite;
}
.iam-caret.is-done { display: none; }
@keyframes iam-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.iam-hero-lede {
  color: var(--th-ink-2);
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
  line-height: 1.65; max-width: 40rem; margin: 0;
}
.th-hero2-sub {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--th-smoke); margin: 0;
}
.th-hero2-sub .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--th-accent); flex: none; }
.th-hero2-row { display: flex; flex-direction: column; gap: var(--sp-4); }
.th-hero2-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.th-hero2-cta .th-btn { margin: 0; }
.th-hero2-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
@media (min-width: 900px) {
  .th-hero2-row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .th-hero2-tags { padding-bottom: 10px; }
}
@media (max-width: 899px) {
  .th-hero2 { min-height: 88dvh; }
  /* reserve the two-line height so the typewriter does not reflow the page */
  .iam-hero-title { min-height: 2.2em; font-size: clamp(26px, 7.6vw, 34px) !important; }
  .iam-hero-veil {
    background: linear-gradient(to top, rgba(255,255,255,0.95) 20%, rgba(255,255,255,0.45) 55%, transparent 100%);
  }
}
.pkp_structure_main .th-hero2-cta,
.pkp_structure_main .th-hero2-tags { margin-left: 0 !important; }

/* --- about and editor card ------------------------------------------------ */
.th-jabout-body {
  color: var(--th-ink-2); line-height: 1.75;
  max-width: var(--ia-measure); font-size: var(--fs-prose);
}
.th-eic-card {
  display: flex; gap: var(--sp-6); align-items: center;
  background: var(--th-card);
  border-radius: var(--r-surface);
  padding: var(--sp-6) var(--sp-7);
  max-width: 44rem;
}
.th-eic-avatar {
  flex: 0 0 68px; width: 68px; height: 68px;
  border-radius: 50%; background: var(--th-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 600;
}
.th-eic-photo {
  flex: 0 0 84px; width: 84px; height: 84px;
  border-radius: 50%; object-fit: cover;
  box-shadow: var(--sh-1);
}
.th-eic-name { font-size: 1.15rem; font-weight: 600; margin: 0 0 var(--sp-1); color: var(--th-ink); }
.th-eic-title { color: var(--th-ink-2); font-size: 0.92rem; margin: 0; }
.th-eic-link {
  display: inline-block; margin-top: var(--sp-2);
  font-size: 0.82rem; font-weight: 600; color: var(--th-accent) !important;
}

/* --- current issue table of contents -------------------------------------- */
.current_issue { border-top: 1px solid var(--th-hairline); }
.current_issue_title { margin: var(--sp-3) 0 var(--sp-6); font-size: 12px; }
.obj_issue_toc .title { color: var(--th-ink); }
.obj_article_summary {
  background: #fff;
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-surface);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.obj_article_summary:hover { border-color: var(--th-hairline-strong); box-shadow: var(--sh-1); }
.obj_article_summary .title { margin: 0; font-size: var(--fs-body) !important; line-height: 1.4 !important; }
.obj_article_summary .title a { color: var(--th-ink); font-weight: 600; text-decoration: none; }
.obj_article_summary .title a:hover { color: var(--th-accent); }
.obj_article_summary .meta { margin-top: var(--sp-2); }
.obj_article_summary .authors { color: var(--th-ink-2); font-size: var(--fs-small); }
.obj_article_summary .pages, .obj_issue_toc .pages,
.obj_article_summary .published {
  font-family: var(--th-font-mono);
  color: var(--th-smoke) !important; font-size: 11px;
}
.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(--th-ink) !important;
  font-size: var(--fs-h3) !important;
  font-weight: 600;
}
.obj_issue_toc .section { border-top: none; }
.obj_issue_toc .published, .obj_issue_toc .description { color: var(--th-ink-2); }

/* --- indexing band: the one inverted block on the page -------------------- */
.th-index-band {
  background: linear-gradient(135deg, var(--th-dark) 0%, var(--th-dark-deep) 100%);
  color: var(--th-ink-inv);
  padding: var(--sp-11) 0;
  margin-top: var(--sp-11);
}
.th-index-inner { max-width: var(--ia-frame-page); margin: 0 auto; padding: 0 var(--ia-gutter); }
.th-index-band .th-h2 { color: #fff !important; margin: var(--sp-1) 0 var(--sp-3); }
.th-index-band .th-kicker { color: var(--th-ink-inv-dim); }
.th-index-band .th-kicker::before { background: #fff; }
.th-index-lede,
.pkp_structure_main .th-index-band p,
.pkp_structure_main .th-index-band li { color: var(--th-ink-inv-dim); }
.th-index-lede { max-width: var(--ia-measure); margin: 0 0 var(--sp-8); }
.th-badges {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--sp-3);
}
.th-badges li { margin: 0; }
.th-badge {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-surface);
  text-decoration: none; color: #fff !important;
  min-height: 72px; justify-content: center;
  transition: border-color .2s ease, background .2s ease, transform .2s var(--ease);
}
.th-badge-name { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.th-badge-desc {
  font-family: var(--th-font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-ink-inv-dim);
}
.th-badge:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); transform: translateY(-3px); }
.th-badge.is-pending { opacity: 0.55; }
.th-badge.is-pending:hover { opacity: 0.9; }

/* --- policies grid -------------------------------------------------------- */
.th-policy-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.th-policy-card {
  display: block;
  background: var(--th-card);
  border: 1px solid transparent;
  border-radius: var(--r-surface);
  padding: var(--sp-6);
  text-decoration: none; color: var(--th-ink) !important;
  transition: transform .2s var(--ease), background .2s ease, border-color .2s ease;
}
.th-policy-card:hover { transform: translateY(-4px); background: var(--th-accent-soft); border-color: var(--th-hairline); }
.th-policy-card h3 { font-size: 1rem !important; font-weight: 600; margin: 0 0 var(--sp-2); }
.th-policy-card p { color: var(--th-smoke); font-size: 0.86rem; line-height: 1.5; margin: 0; }

/* =============================================================================
   8. ARTICLE PAGE
   -----------------------------------------------------------------------------
   The parent floats .main_entry (560px) beside .entry_details (300px) and draws
   1px rules between them. Replaced with a two-column grid: reading column plus
   a sticky rail that carries the PDF action and the citation block.
   ========================================================================== */
.iam-article .page_title {
  font-size: clamp(22px, 2.6vw, 34px) !important;
  font-weight: 600; line-height: 1.22 !important;
  margin-bottom: var(--sp-4);
  max-width: 46rem;
}
.iam-article .subtitle {
  font-size: var(--fs-lead) !important; font-weight: 400;
  color: var(--th-ink-2); margin: 0 0 var(--sp-4); max-width: 46rem;
}
.iam-meta-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--th-hairline);
}

.obj_article_details .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin: 0 !important;
  padding: 0;
  border: none !important;
}
.obj_article_details .row::before,
.obj_article_details .row::after { content: none !important; display: none !important; }
.obj_article_details .main_entry {
  float: none !important; width: auto !important; min-width: 0;
  border-right: none !important; padding: 0;
}
.obj_article_details .entry_details {
  float: none !important; width: auto !important;
  margin: 0 !important; padding: 0;
  border: 1px solid var(--th-hairline) !important;
  border-radius: var(--r-surface);
  background: var(--th-mist);
  position: sticky; top: calc(var(--ia-head) + var(--sp-4));
  max-height: calc(100vh - var(--ia-head) - var(--sp-8));
  overflow: auto;
}
.obj_article_details .entry_details .item {
  margin: 0 !important;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--th-hairline) !important;
}
.obj_article_details .entry_details .item:last-child { border-bottom: none !important; }
.obj_article_details .item .label { margin: 0 0 var(--sp-2); font-size: 11px; font-weight: 500; }
.obj_article_details .main_entry .item .label {
  font-family: var(--th-font-body) !important;
  font-size: var(--fs-h3) !important; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none; color: var(--th-ink);
  margin: 0 0 var(--sp-4);
}
.obj_article_details .main_entry .item { margin-bottom: var(--sp-8); }
.obj_article_details .item .value, .obj_article_details .item { color: var(--th-ink-2); font-size: var(--fs-small); }
.obj_article_details .item .value a, .obj_article_details .authors a { color: var(--th-accent); }
.obj_article_details .cover_image img { max-width: 150px; border-radius: var(--r-inner); }
.obj_article_details .entry_details img { max-width: 100%; height: auto; }

.iam-article .item.authors { margin-bottom: var(--sp-6) !important; }
.iam-article .authors > .authors { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.iam-article .authors .name { font-weight: 600; font-size: var(--fs-body); color: var(--th-ink); }
.iam-article .authors .affiliation { display: block; color: var(--th-ink-2); font-size: var(--fs-small); }
.iam-article .authors .orcid { display: block; font-size: var(--fs-caption); }

.iam-article .item.abstract {
  background: var(--th-mist);
  border: 1px solid var(--th-hairline);
  border-left: 3px solid var(--th-accent);
  border-radius: var(--r-surface);
  padding: var(--sp-6);
  margin: var(--sp-6) 0 var(--sp-8);
}
.iam-abstract-body {
  max-width: var(--ia-measure);
  font-size: var(--fs-prose); line-height: 1.75; color: var(--th-ink-2);
}
.iam-abstract-body p:last-child { margin-bottom: 0; }

.iam-keyword-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.iam-kw {
  display: inline-block;
  border: 1px solid var(--th-hairline-strong);
  border-radius: var(--r-pill);
  padding: 4px 13px;
  font-size: var(--fs-small); font-weight: 500;
  color: var(--th-accent) !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.iam-kw:hover { background: var(--th-accent); color: #fff !important; }

.iam-references p {
  padding-left: 1.6em; text-indent: -1.6em;
  line-height: 1.65; margin: 0 0 var(--sp-3);
  font-size: var(--fs-small); color: var(--th-ink-2);
  max-width: var(--ia-measure);
}

/* citation block in the rail */
.item.citation_display .value, #citationOutput, .csl-entry {
  color: var(--th-ink-2); background: transparent; font-size: var(--fs-small);
}
.item.citation_display .label, .citation_formats_button { color: var(--th-ink) !important; }
.citation_formats { background: #fff; border: 1px solid var(--th-hairline) !important; border-radius: var(--r-surface); }
.citation_formats_styles a { color: var(--th-ink-2); border-bottom-color: var(--th-hairline) !important; }
.citation_formats_styles a:hover { color: var(--th-ink); background: var(--th-mist); }

/* PDF galley: the primary action on the page */
.galleys_links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.galleys_links li { margin: 0; }
.obj_galley_link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: 44px;
  padding: 0.6rem 1.2rem; border-radius: var(--r-pill);
  font-weight: 500; font-size: 0.9rem;
  color: #fff !important; text-decoration: none !important;
  background: var(--th-accent); border: none;
  transition: background 0.15s ease;
}
.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(--th-accent-hover); color: #fff !important; }
.obj_galley_link.restricted { opacity: 0.6; }

@media (max-width: 900px) {
  .obj_article_details .row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .obj_article_details .entry_details {
    order: -1; position: static; max-height: none; overflow: visible; width: 100%;
  }
  .obj_article_details .cover_image { display: none; }
}

/* =============================================================================
   9. LONG-FORM: POLICY, LEGAL, ABOUT, CONTACT
   ========================================================================== */
.ia-policy-page {
  max-width: var(--ia-measure);
  margin-inline: auto;
  font-size: var(--fs-prose);
}
.ia-policy-page h1 { font-size: var(--fs-h2) !important; font-weight: 600; margin-bottom: var(--sp-5); }
.ia-policy-page h2 {
  font-size: var(--fs-h3) !important; font-weight: 600;
  margin: var(--sp-9) 0 var(--sp-3); padding-top: var(--sp-4);
  border-top: 1px solid var(--th-hairline);
  scroll-margin-top: calc(var(--ia-head) + var(--sp-6));
}
.ia-policy-page h3 { font-size: var(--fs-body) !important; font-weight: 600; margin: var(--sp-6) 0 var(--sp-2); }
.ia-policy-page p, .ia-policy-page li { line-height: 1.75; }
.ia-policy-page ul, .ia-policy-page ol { padding-left: 1.2rem; }
.ia-policy-page li { margin-bottom: var(--sp-2); }
.ia-policy-page strong { color: var(--th-ink); }

/* contents rail: built by iamodern.js from the h2 headings of a long policy
   page. It is navigation, not decoration, so it only appears when the page
   actually has enough sections to need it. */
.ia-toc { display: none; }
.ia-toc-h {
  font-family: var(--th-font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--th-smoke);
  margin: 0 0 var(--sp-3);
}
.ia-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--th-hairline); }
.ia-toc li { margin: 0; }
.ia-toc a {
  display: block; padding: var(--sp-2) var(--sp-4);
  margin-left: -1px; border-left: 2px solid transparent;
  color: var(--th-ink-2) !important; font-size: var(--fs-small); line-height: 1.4;
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease;
}
.ia-toc a:hover { color: var(--th-accent) !important; border-left-color: var(--th-accent); }
@media (min-width: 1180px) {
  .pkp_structure_main > .page:has(> .ia-toc) {
    display: grid;
    grid-template-columns: var(--ia-rail) minmax(0, var(--ia-measure));
    gap: var(--sp-9);
    justify-content: center;
    align-items: start;
  }
  .pkp_structure_main > .page:has(> .ia-toc) > .cmp_breadcrumbs,
  .pkp_structure_main > .page:has(> .ia-toc) > h1,
  .pkp_structure_main > .page:has(> .ia-toc) > .page_title { grid-column: 1 / -1; }
  .ia-toc { display: block; position: sticky; top: calc(var(--ia-head) + var(--sp-7)); }
}

/* CC BY legalcode: dense reference text, kept visually secondary */
.ia-legalcode {
  margin-top: var(--sp-6); padding: var(--sp-6);
  background: var(--th-mist);
  border: 1px solid var(--th-hairline); border-radius: var(--r-surface);
  font-size: var(--fs-small); line-height: 1.7;
}
.ia-legalcode h2, .ia-legalcode h3 {
  font-size: var(--fs-body) !important; border-top: none;
  margin-top: var(--sp-6); padding-top: 0;
}
.ia-legalcode ol, .ia-legalcode ul { padding-left: 1.3rem; }

/* OJS about pages share the reading frame */
.pkp_structure_main .page :is(h2, h3) { color: var(--th-ink); }
.pkp_structure_main .page > .description,
.pkp_structure_main .about_section { line-height: 1.75; }
.pkp_page_about .page :is(h2, h3) { scroll-margin-top: calc(var(--ia-head) + var(--sp-6)); }
/* contact page: two contact cards instead of two bare columns */
.page_contact .contact_section { margin-top: var(--sp-7); }
.page_contact .address { color: var(--th-ink-2); }

/* =============================================================================
   10. LISTINGS: ARCHIVE, ANNOUNCEMENTS, SEARCH, EDITORIAL BOARD
   ========================================================================== */

/* --- issue archive -------------------------------------------------------- */
.pkp_page_issue .issues_archive {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-6);
  align-items: start;
}
.pkp_page_issue .issues_archive > li { margin: 0; padding: 0; border: 0; }
.iam-issue-card {
  background: #fff;
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-surface);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease;
}
.iam-issue-card:hover {
  transform: translateY(-3px);
  border-color: var(--th-hairline-strong);
  box-shadow: var(--sh-1);
}
.iam-issue-card .cover { display: block; margin: 0; float: none; width: 100%; max-width: none; }
.iam-issue-card .cover img {
  width: 100%; aspect-ratio: 1 / 1.414; object-fit: cover;
  border-radius: var(--r-inner); display: block;
}
/* issues published without a cover keep the same rhythm as the ones with one */
.iam-issue-card:not(:has(.cover))::before {
  content: "";
  width: 100%; aspect-ratio: 1 / 1.414;
  border-radius: var(--r-inner);
  background:
    url("../assets/ia-mark.png") no-repeat center / 42% auto,
    var(--th-accent-soft);
  opacity: 0.9;
}
.iam-issue-card .iam-issue-meta { display: flex; flex-direction: column; gap: var(--sp-1); }
.iam-issue-card h2 { margin: 0; font-size: var(--fs-small) !important; line-height: 1.4 !important; }
.iam-issue-card .title { color: var(--th-ink); font-weight: 600; text-decoration: none; }
.iam-issue-card .title:hover { color: var(--th-accent); }
.iam-issue-date { font-size: 11px; }

/* --- announcements -------------------------------------------------------- */
.cmp_announcements { list-style: none; padding: 0; margin: 0; }
.cmp_announcements > li {
  margin: 0 0 var(--sp-4); padding: 0 !important; border-bottom: none !important;
}
.obj_announcement_summary {
  background: #fff;
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-surface);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.obj_announcement_summary:hover { border-color: var(--th-hairline-strong); box-shadow: var(--sh-1); }
.obj_announcement_summary :is(h2, h3, h4) { margin: 0; font-size: var(--fs-lead) !important; line-height: 1.35 !important; }
.obj_announcement_summary a { color: var(--th-ink); text-decoration: none; font-weight: 600; }
.obj_announcement_summary a:hover { color: var(--th-accent); }
.obj_announcement_summary .date { margin: var(--sp-2) 0 var(--sp-3); }
.obj_announcement_summary .summary { color: var(--th-ink-2); font-size: var(--fs-small); }
.obj_announcement_summary .read_more { display: inline-block; margin-top: var(--sp-3); font-weight: 600; font-size: var(--fs-small); }
.pkp_page_announcement .page_announcements > .obj_announcement_summary,
.cmp_announcements > li { max-width: none; }

/* --- search --------------------------------------------------------------- */
.page_search .cmp_form { max-width: none; }
.page_search .search_input { margin-bottom: var(--sp-5); }
.page_search .search_input .query {
  width: 100%; height: auto; min-height: 52px;
  font-size: 1.05rem; line-height: 1.4;
}
.page_search .search_advanced {
  border: 1px solid var(--th-hairline); border-radius: var(--r-surface);
  padding: var(--sp-5);
}
.page_search .search_advanced legend { padding: 0 var(--sp-2); margin: 0; }
.page_search .date_range { float: none; width: auto; }
.page_search .date_range fieldset { border: none; padding: 0; margin: 0 0 var(--sp-4); }
.page_search .date_range select { width: auto !important; min-width: 6rem; }
.page_search .date_range select + label + select { margin-left: var(--sp-2); }
.page_search fieldset.search_advanced > div { display: grid; gap: var(--sp-5); }
@media (min-width: 760px) {
  .page_search fieldset.search_advanced > .date_range,
  .page_search fieldset.search_advanced { }
  .page_search .search_advanced .date_range { display: inline-block; width: 48%; vertical-align: top; }
  .page_search .search_advanced .author { display: inline-block; width: 48%; vertical-align: top; }
}
.search_results { margin: var(--sp-8) 0 0; padding: 0; list-style: none; }
.search_results > li { margin: 0 0 var(--sp-3); }
.search_results .obj_article_summary { margin: 0; }
.search_results .obj_article_summary .meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
}

/* --- editorial board -----------------------------------------------------
   The board markup and its base styles are published from the admin side and
   arrive inline in the page. These rules only harmonise it with the theme
   (radius, hairline, focus ring); the selectors are one level more specific
   than the inline block so they win without !important.                     */


/* =============================================================================
   11. AUTH: LOGIN AND REGISTER
   ========================================================================== */
.pkp_page_login .pkp_structure_content { max-width: calc(26rem + 2 * var(--ia-gutter)); }
.pkp_page_user.pkp_op_register .pkp_structure_content { max-width: calc(32rem + 2 * var(--ia-gutter)); }
.pkp_page_login .pkp_structure_sidebar,
.pkp_page_user.pkp_op_register .pkp_structure_sidebar { display: none; }
.pkp_page_login .page_title, .pkp_op_register .page_title,
.pkp_page_login .page > h1, .pkp_op_register .page > h1 {
  text-align: center;
  font-size: var(--fs-h2) !important; font-weight: 600;
  margin-bottom: var(--sp-6);
}
.pkp_page_login .cmp_breadcrumbs, .pkp_op_register .cmp_breadcrumbs { text-align: center; }
.pkp_page_login .cmp_form, .pkp_op_register .cmp_form { box-shadow: var(--sh-2); }
.pkp_page_login .cmp_form input, .pkp_op_register .cmp_form input { max-width: none !important; }
.pkp_page_login .cmp_form .buttons, .pkp_op_register .cmp_form .buttons {
  flex-direction: row-reverse; justify-content: flex-start; gap: var(--sp-5);
}
.pkp_page_login .cmp_form.login { max-width: none; }
.pkp_page_login .buttons button, .pkp_op_register .buttons button,
.pkp_page_login .buttons a, .pkp_op_register .buttons a { float: none; margin: 0; }
.pkp_page_login .cmp_form .buttons button { flex: 1 1 auto; }
.pkp_op_register .cmp_form .buttons { flex-direction: row-reverse; justify-content: flex-start; }

/* =============================================================================
   12. MOTION
   -----------------------------------------------------------------------------
   MOTION_INTENSITY 3: hover and focus feedback, one scroll reveal on the home
   page, the hero typewriter. Nothing loops, nothing hijacks the scroll.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal-delay="3"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .iam-caret { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =============================================================================
   13. NARROW VIEWPORTS
   ========================================================================== */
@media (max-width: 640px) {
  .pkp_structure_main { padding-top: var(--sp-6) !important; padding-bottom: var(--sp-10) !important; }
  .page_title { font-size: 26px !important; }
  .th-section { padding: var(--sp-9) var(--ia-gutter); }
  .cmp_form, .pkp_form { padding: var(--sp-5) var(--sp-4); }
  .iam-article .item.abstract { padding: var(--sp-5) var(--sp-4); }
  .obj_article_details .entry_details .item { padding: var(--sp-4); }
  .pkp_page_issue .issues_archive { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
  .th-eic-card { flex-direction: column; align-items: flex-start; padding: var(--sp-5); }
  .th-index-band { padding: var(--sp-9) 0; }
  .cmp_form .buttons, .pkp_form .buttons { flex-wrap: wrap; }
}

/* =========================================================================
   13. Audit corrections
   Fixes from the design review: header overflow, keyboard focus, no-JS
   content visibility, alignment, touch targets, print. Kept in one block so
   the reasoning stays attached to the rules.
   ========================================================================= */

/* --- Header fit: the actions row used to run off-screen between the desktop
   layout and the 1080px breakpoint, taking Login and Register with it. The
   bar now shrinks first and wraps as a last resort, so nothing is ever
   pushed past the viewport edge. --- */
.cf-head-inner { flex-wrap: wrap; row-gap: 0.5rem; }
.cf-nav { min-width: 0; flex: 0 1 auto; }
.cf-actions { flex: 0 0 auto; }
@media (max-width: 1439px) {
  .cf-menu > li > a { padding-inline: 0.7rem; }
  .th-search-input, .th-search-input:focus { width: 120px; }
}
@media (max-width: 1320px) {
  .th-search-form { display: none; }   /* search stays reachable in the menu */
}

/* --- Keyboard focus: the OJS parent rules out-specify the generic
   :focus-visible, so the nav and the search field had no ring at all. --- */
.cf-menu a:focus-visible,
.cf-user-menu a:focus-visible,
.cf-lang-menu a:focus-visible,
.cf-lang-btn:focus-visible,
.cf-burger:focus-visible,
.cf-sub-toggle:focus-visible,
.th-search-input:focus-visible,
.pkp_structure_main a:focus-visible {
  outline: 2px solid var(--th-accent) !important;
  outline-offset: 2px;
  border-radius: 4px;
}
/* the search field animated its width and killed its own outline */
.th-search-input { transition: border-color .2s ease; }

/* --- Touch targets in the header (the form primitives already had 44px) --- */
.cf-burger, .cf-lang-btn, .cf-sub-toggle, .th-search-input { min-height: 44px; }

/* --- Reveal animation must never hide content when JS does not run: the
   opacity gate now depends on the class the script sets itself. --- */
[data-reveal] { opacity: 1; transform: none; }
html.iam-js [data-reveal] { opacity: 0; transform: translateY(20px); }
html.iam-js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.iam-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Hero copy shares the page frame instead of hugging the window --- */
.iam-hero-body {
  max-width: var(--ia-frame-page, 72rem);
  margin-inline: auto;
  width: 100%;
}
/* Cyrillic and Uzbek titles wrap to two lines: reserve the taller box so the
   headline does not shove the page down mid-animation */
.iam-hero-title { min-height: 2.2em; }

/* --- Policy pages: the heading belongs over its text, not over the rail --- */
.pkp_structure_content:has(.ia-toc) .pkp_structure_main > .cmp_breadcrumbs,
.pkp_structure_content:has(.ia-toc) .pkp_structure_main > h1,
.pkp_structure_content:has(.ia-toc) .pkp_structure_main > .page_title {
  grid-column: 2;
}

/* --- Article reading column: one left edge, not four --- */
.obj_article_details .main_entry > .item,
.obj_article_details .main_entry > .item > *,
.obj_article_details .main_entry .iam-references,
.obj_article_details .main_entry .authors {
  margin-inline: 0;
}
/* the rail is taller than the viewport on long articles: let the page scroll
   it rather than hiding half of it in a nested scroller */
.obj_article_details .entry_details { max-height: none; overflow: visible; }

/* --- Legal code: the CC text ships its own h1/h2/h3, which flattened into
   one size. Re-establish a hierarchy without touching the wording. --- */
.ia-legalcode h1 { font-size: var(--fs-h3) !important; font-weight: 600; margin-top: 0; }
.ia-legalcode h2 { font-size: var(--fs-lead) !important; font-weight: 600; }
.ia-legalcode h3 { font-size: var(--fs-small) !important; font-weight: 600; color: var(--th-ink-2); }

/* --- About/contact/submissions/privacy used the narrow reading frame --- */
.pkp_page_about .pkp_structure_content { max-width: var(--ia-frame-main, 62rem); }

/* --- A broken image from a sibling plugin was rendering in the metrics card --- */
.pkp_structure_main img[src$="iaPublishingTools/assets/logo.png"] { display: none; }

/* --- Editorial board: the admin-side publisher ships its own inline styles;
   harmonise the typeface and stop the ragged card bottoms --- */


/* --- Mobile menu: the language list was permanently open (a decoy control)
   and the actions sat below 23 About links --- */
@media (max-width: 1200px) {
  .cf-lang-menu { display: none; }
  .cf-lang-menu.is-open { display: block; opacity: 1; visibility: visible; transform: none; }
  .cf-head.cf-open .cf-actions { order: 2; }
  .cf-head.cf-open .cf-nav { order: 3; }
}

/* --- Restraint: one kicker dot per page was already too many --- */
.th-kicker::before, .th-hero2-sub .dot { display: none; }
.th-kicker { padding-left: 0; }

/* --- Search: the advanced panel repeated the form card around itself --- */
.page_search .search_advanced {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.page_search .date_range select { border-radius: 10px; min-height: 44px; }

/* --- Announcements: the read-more link floated wherever the text ended --- */
.obj_announcement_summary .read_more { display: block; margin-top: 0.6rem; }

/* --- Print: readers of a scholarly site print articles --- */
@media print {
  .cf-head, .ia-toc, .pkp_structure_footer_wrapper, .iam-map-wrap,
  .th-search-form, .cf-actions, .iam-cert { display: none !important; }
  .obj_article_details .entry_details { position: static; max-height: none; }
  [data-reveal], html.iam-js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .pkp_structure_content, .pkp_structure_main { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* =========================================================================
   14. Article: masthead, certificate, readership
   ========================================================================= */

/* --- Masthead: the title carries the article, so it gets the navy field --- */
.iam-article-masthead {
  background: linear-gradient(135deg, var(--th-dark, #08457E) 0%, var(--th-dark-deep, #062F57) 100%);
  color: #fff;
  border-radius: 18px;
  padding: 2rem 2.2rem;
  margin-bottom: 1.6rem;
}
.iam-masthead-section {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 0.9rem;
  font-size: var(--fs-caption, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.iam-article-masthead .page_title {
  color: #fff !important;
  margin: 0;
  font-size: clamp(21px, 2.3vw, 30px) !important;
  font-weight: 600;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  text-transform: none;
}
.iam-masthead-subtitle {
  color: rgba(255, 255, 255, 0.82);
  margin: 0.7rem 0 0;
  font-size: var(--fs-lead, 18px);
  line-height: 1.45;
}
.iam-masthead-issue {
  margin: 1rem 0 0;
  font-size: var(--fs-small, 14px);
  color: rgba(255, 255, 255, 0.78);
}
.iam-masthead-issue a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .iam-article-masthead { padding: 1.4rem 1.3rem; border-radius: 14px; } }

/* --- Certificate: one action, dropdown only when a paper has several authors --- */
.iam-cert { margin-top: 0.6rem; }
.iam-cert-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--th-accent, #08457E);
  border-radius: 999px;
  background: #fff;
  color: var(--th-accent, #08457E);
  font: inherit;
  font-size: var(--fs-small, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.iam-cert-btn:hover { background: var(--th-accent, #08457E); color: #fff; }
.iam-cert-btn[disabled] { opacity: 0.55; cursor: default; }
.iam-cert-list { display: grid; gap: 0.3rem; margin-top: 0.5rem; }
.iam-cert-list a {
  display: block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--th-hairline);
  border-radius: 10px;
  font-size: var(--fs-small, 14px);
  text-decoration: none;
}
.iam-cert-list a:hover { background: var(--th-mist); }

/* --- Readership: counters, world map, ranked countries --- */
.iam-readership { margin-top: 2rem; }
.iam-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.8rem 0 1.4rem;
}
.iam-stat {
  background: var(--th-card, #F5F6F8);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
.iam-stat strong {
  display: block;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--th-ink);
  font-variant-numeric: tabular-nums;
}
.iam-stat span { font-size: var(--fs-caption, 12px); color: var(--th-smoke); }

.iam-map-wrap { position: relative; }
.iam-map-holder svg { display: block; width: 100%; height: auto; }
.iam-map-holder path {
  fill: #EDF1F6;
  stroke: #fff;
  stroke-width: 0.4;
  transition: fill .15s ease;
}
/* five steps: enough to read the distribution, not so many it turns to mush */
.iam-map-holder path.is-l0 { fill: #CBDCEC; }
.iam-map-holder path.is-l1 { fill: #9CBDDC; }
.iam-map-holder path.is-l2 { fill: #6A99C6; }
.iam-map-holder path.is-l3 { fill: #3A72AC; }
.iam-map-holder path.is-l4 { fill: var(--th-accent, #08457E); }
.iam-map-holder path.is-active:hover { fill: #F0A94C; }
.iam-map-tip {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  background: var(--th-ink);
  color: #fff;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: var(--fs-caption, 12px);
  font-weight: 600;
}

.iam-country-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.iam-country-list li {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--fs-small, 14px);
}
.iam-country-list i { height: 8px; border-radius: 999px; background: var(--th-accent, #08457E); opacity: 0.85; }
.iam-country-list b { font-variant-numeric: tabular-nums; color: var(--th-ink-2); font-weight: 600; }
@media (max-width: 640px) {
  .iam-stat-row { grid-template-columns: 1fr; }
  .iam-country-list li { grid-template-columns: 8rem 1fr auto; }
}

/* --- Footer headings: mono caps read as system output, not as a label --- */
.th-footer-h {
  font-family: var(--th-font-body) !important;
  font-size: var(--fs-small, 14px) !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  opacity: 0.92;
  margin-bottom: 0.55rem;
}

/* page range sits after the issue link, spaced and clearly secondary */
.iam-masthead-pages {
  display: inline-block;
  margin-left: 0.7rem;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.72);
}

/* footer column headings read as headings, not as dimmed system output */
.th-footer-h { color: #fff !important; opacity: 1; }

/* contact: map links under the postal address */
.iam-map-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.9rem 0 0; }
.iam-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--th-hairline);
  border-radius: 999px;
  font-size: var(--fs-small, 14px);
  font-weight: 600;
  text-decoration: none !important;
  color: var(--th-accent) !important;
  background: #fff;
}
.iam-map-link::before {
  content: "";
  width: 15px; height: 15px; 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='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='none' stroke='%23000' stroke-width='2'/%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='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
.iam-map-link:hover { border-color: var(--th-accent); background: var(--th-mist); }
/* ═══════════════════════════════════════════════════════════════════════════
   iamodern — About section additions (journal-covers project)

   Appended to plugins/themes/iamodern/styles/iamodern.css on the OJS host.
   Kept here because that file is also written by other deploys, which drop
   anything appended to it; re-apply with theme/apply_about_css.sh after a push.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- two-column About: prose left, journal fan right --------------------- */
.th-jabout-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--ia-measure)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.th-jabout-grid--solo { grid-template-columns: minmax(0, var(--ia-measure)); }
.th-jabout-figure { margin: 0; }
.th-jabout-figure img {
  display: block; width: 100%; height: auto;
  max-width: 620px; margin-inline: auto;
}

/* --- interactive fan of the family's current issues ---------------------- */
.th-jfan-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.th-jfan {
  --card-w: clamp(120px, 13vw, 168px);
  list-style: none; margin: 0; padding: 0;
  position: relative;
  width: 100%;
  height: calc(var(--card-w) * 1.414 + 52px);
  display: flex; align-items: center; justify-content: center;
}
.th-jfan-item {
  position: absolute;
  width: var(--card-w);
  /* fan out from the centre: each card steps right and rotates a little more.
     --step is signed; --lift is its magnitude, since CSS abs() is too new to
     rely on here. */
  --step: calc(var(--i) - (var(--n) - 1) / 2);
  --lift: max(var(--step), calc(-1 * var(--step)));
  transform: translateX(calc(var(--step) * var(--card-w) * 0.44))
             translateY(calc(var(--lift) * 5px))
             rotate(calc(var(--step) * 5deg));
  transform-origin: 50% 115%;
  z-index: calc(var(--i) + 1);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.th-jfan:hover .th-jfan-item,
.th-jfan:focus-within .th-jfan-item {
  transform: translateX(calc(var(--step) * var(--card-w) * 0.64))
             translateY(calc(var(--lift) * 3px))
             rotate(calc(var(--step) * 7deg));
}
.th-jfan-item:hover,
.th-jfan-item:focus-within {
  z-index: 20;
  transform: translateX(calc(var(--step) * var(--card-w) * 0.64))
             translateY(-18px) rotate(0deg) scale(1.06) !important;
}
.th-jfan-card {
  display: block; position: relative; text-decoration: none;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(8, 26, 45, .28), 0 2px 6px rgba(8, 26, 45, .18);
  outline-offset: 3px;
}
.th-jfan-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 794 / 1123; object-fit: cover;
}
.th-jfan-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 7px 8px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-align: center;
  color: #fff; background: rgba(8, 69, 126, .92);
  opacity: 0; transform: translateY(100%);
  transition: opacity .25s ease, transform .25s ease;
}
.th-jfan-item:hover .th-jfan-tag,
.th-jfan-item:focus-within .th-jfan-tag { opacity: 1; transform: translateY(0); }
.th-jfan-note {
  margin: 0; font-size: 13px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--th-ink-2, #444141) 70%, transparent);
}

@media (max-width: 900px) {
  .th-jabout-grid { grid-template-columns: minmax(0, 1fr); }
  .th-jabout-figure, .th-jfan-wrap { order: -1; }
  .th-jabout-figure img { max-width: 460px; }
  /* no hover on touch: lay the covers out as a scrollable row instead */
  .th-jfan {
    height: auto; display: flex; justify-content: flex-start;
    gap: 12px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .th-jfan-item {
    position: static; transform: none !important;
    flex: 0 0 auto; width: 140px; scroll-snap-align: start;
  }
  .th-jfan-tag { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .th-jfan-item, .th-jfan-tag { transition: none; }
}
/* @journal-covers:about-block */
/* ═══════════════════════════════════════════════════════════════════════════
   iamodern — About section additions (journal-covers project)

   Appended to plugins/themes/iamodern/styles/iamodern.css on the OJS host.
   Kept here because that file is also written by other deploys, which drop
   anything appended to it; re-apply with theme/apply.sh after a push.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- two-column About: prose left, current-issue cover right -------------- */
.th-jabout-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--ia-measure)) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.th-jabout-grid--solo { grid-template-columns: minmax(0, var(--ia-measure)); }
.th-jabout-figure { margin: 0; }
.th-jabout-figure img {
  display: block; width: 100%; height: auto;
  max-width: 620px; margin-inline: auto;
}

/* --- the cover card: a slow, hand-held drift ------------------------------ */
.th-jhero {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  perspective: 1500px;
}
.th-jhero-card {
  --w: clamp(210px, 23vw, 320px);
  display: block; position: relative;
  width: var(--w);
  border-radius: 3px;
  text-decoration: none;
  transform-style: preserve-3d;
  /* two periods that do not divide evenly, so the drift never visibly loops */
  animation: th-jhero-drift 13s ease-in-out infinite,
             th-jhero-lift 9s ease-in-out infinite;
  will-change: transform;
}
.th-jhero-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 794 / 1123; object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 26px 50px -18px rgba(8, 26, 45, .55),
              0 8px 18px -8px rgba(8, 26, 45, .35);
  animation: th-jhero-shadow 9s ease-in-out infinite;
}
/* a specular sweep, as if the card catches a window */
.th-jhero-sheen {
  position: absolute; inset: 0; border-radius: 3px; overflow: hidden;
  pointer-events: none;
}
.th-jhero-sheen::before {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -40%; width: 32%;
  background: linear-gradient(100deg,
              rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(8deg);
  animation: th-jhero-sheen 13s ease-in-out infinite;
}

@keyframes th-jhero-drift {
  0%,  100% { transform: rotateY(-11deg) rotateX( 2.5deg) rotateZ(-1.4deg); }
  50%       { transform: rotateY(  4deg) rotateX(-2.0deg) rotateZ( 1.2deg); }
}
@keyframes th-jhero-lift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
@keyframes th-jhero-shadow {
  0%, 100% { box-shadow: 0 26px 50px -18px rgba(8,26,45,.55), 0 8px 18px -8px rgba(8,26,45,.35); }
  50%      { box-shadow: 0 44px 66px -20px rgba(8,26,45,.42), 0 14px 26px -10px rgba(8,26,45,.26); }
}
@keyframes th-jhero-sheen {
  0%, 62%  { left: -40%; }
  86%,100% { left: 108%; }
}

/* hover / keyboard focus: the card squares up to the reader and comes forward */
.th-jhero-card:hover,
.th-jhero-card:focus-visible {
  animation-play-state: paused;
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.045);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.th-jhero-card:hover img,
.th-jhero-card:focus-visible img { animation-play-state: paused; }
.th-jhero-card:focus-visible { outline: 2px solid var(--th-accent, #08457E); outline-offset: 6px; }

.th-jhero-note {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--th-ink-2, #444141) 65%, transparent);
}

@media (max-width: 900px) {
  .th-jabout-grid { grid-template-columns: minmax(0, 1fr); }
  .th-jabout-figure, .th-jhero { order: -1; }
  .th-jabout-figure img { max-width: 460px; }
  .th-jhero-card { --w: min(62vw, 260px); }
}
@media (prefers-reduced-motion: reduce) {
  .th-jhero-card, .th-jhero-card img, .th-jhero-sheen::before { animation: none; }
  .th-jhero-card { transform: rotateY(-6deg); }
}

/* =========================================================================
   15. Editorial board
   The markup is published from the admin side (board_publisher.py); it ships
   only a bare fallback style, so everything visual lives here, in one place,
   on the theme's own tokens. Class names are contractual: `.ia-eb-grid` also
   drives the page-width rule in section 3.
   ========================================================================= */

.pkp_structure_main .ia-eb-lead { max-width: var(--ia-measure, 44rem); color: var(--th-ink-2); }

/* --- Editor-in-chief: outside the grid, never flips --- */
.pkp_structure_main .ia-eb-chief {
  display: flex; gap: var(--sp-6); align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--th-hairline);
  border-left: 3px solid var(--th-accent);
  border-radius: var(--r-surface);
  background: var(--th-mist);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-5) 0 var(--sp-7);
}
.pkp_structure_main .ia-eb-chief img {
  width: 150px; height: 150px; object-fit: cover;
  border-radius: var(--r-inner); box-shadow: var(--sh-1);
}
.pkp_structure_main .ia-eb-chief-name { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); color: var(--th-ink); font-weight: 600; }
.pkp_structure_main .ia-eb-badge {
  display: inline-block; margin-bottom: var(--sp-3);
  background: var(--th-accent); color: #fff;
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: var(--fs-caption); font-weight: 600;
}
.pkp_structure_main .ia-eb-chief-aff { margin: 0; color: var(--th-ink-2); line-height: 1.55; }

/* --- Filter --- */
.pkp_structure_main .ia-eb-filter {
  width: 100%; max-width: 26rem; margin: var(--sp-2) 0 var(--sp-4);
  min-height: 44px; padding: 0.6rem 1.1rem;
  border: 1px solid var(--th-hairline); border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-small); color: var(--th-ink);
  font-family: var(--th-font-body) !important;
}
.pkp_structure_main .ia-eb-filter:focus-visible {
  outline: 2px solid var(--th-accent); outline-offset: 2px;
}
.pkp_structure_main .ia-eb-count {
  margin: 0 0 var(--sp-3); font-size: var(--fs-caption); color: var(--th-smoke);
}

/* --- Grid --- */
.pkp_structure_main .ia-eb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-2); padding: 0;
  list-style: none; align-items: start;
}
.pkp_structure_main .ia-eb-card.is-hidden { display: none; }

/* --- Card: two faces on one 3D stage --------------------------------------
   Height is driven by the front face; the back is absolutely positioned over
   it. Cards with nothing extra to show (`data-has-back="0"`) never turn. --- */
.pkp_structure_main .ia-eb-card {
  position: relative;
  min-height: 11rem;
  padding: 0; border: 0; background: none;
  perspective: 1200px;
  list-style: none;
  font-family: var(--th-font-body) !important;
}
.pkp_structure_main .ia-eb-inner {
  position: relative;
  height: 100%;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}
.pkp_structure_main .ia-eb-face {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid var(--th-hairline);
  border-radius: var(--r-surface);
  background: var(--th-canvas);
  padding: var(--sp-4) var(--sp-5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pkp_structure_main .ia-eb-front { min-height: 11rem; }
.pkp_structure_main .ia-eb-back {
  position: absolute; inset: 0;
  flex-direction: column; gap: var(--sp-2);
  overflow: auto;
  transform: rotateY(180deg);
  background: var(--th-mist);
  border-color: var(--th-accent);
}
.pkp_structure_main .ia-eb-card[data-has-back="1"]:hover .ia-eb-inner,
.pkp_structure_main .ia-eb-card[data-has-back="1"]:focus-within .ia-eb-inner,
.pkp_structure_main .ia-eb-card.is-flipped .ia-eb-inner { transform: rotateY(180deg); }
.pkp_structure_main .ia-eb-card[data-has-back="1"] { cursor: pointer; }
.pkp_structure_main .ia-eb-card:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; border-radius: var(--r-surface); }
.pkp_structure_main .ia-eb-card[data-has-back="0"] .ia-eb-front:hover {
  border-color: var(--th-hairline-strong); box-shadow: var(--sh-1);
}

/* front face contents */
.pkp_structure_main .ia-eb-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--th-accent-soft); color: var(--th-accent);
  font-weight: 600; font-size: var(--fs-small); letter-spacing: .02em;
}
.pkp_structure_main img.ia-eb-avatar { object-fit: cover; background: none; }
.pkp_structure_main .ia-eb-body { min-width: 0; }
.pkp_structure_main .ia-eb-name { margin: 0 0 3px; font-size: var(--fs-small); font-weight: 600; color: var(--th-ink); line-height: 1.3; }
.pkp_structure_main .ia-eb-role { margin: 0 0 5px; font-size: var(--fs-caption); font-weight: 600; color: var(--th-accent); letter-spacing: .03em; }
.pkp_structure_main .ia-eb-aff {
  margin: 0; font-size: var(--fs-caption); color: var(--th-ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* a quiet corner mark tells the reader the card has a second side */
.pkp_structure_main .ia-eb-hint {
  position: absolute; right: 10px; bottom: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--th-accent-soft);
  color: var(--th-accent);
}
.pkp_structure_main .ia-eb-hint::after {
  content: ""; position: absolute; inset: 4px;
  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='M3 12a9 9 0 0 1 15-6.7V3M21 12a9 9 0 0 1-15 6.7V21' fill='none' stroke='%23000' stroke-width='2.5'/%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='M3 12a9 9 0 0 1 15-6.7V3M21 12a9 9 0 0 1-15 6.7V21' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E");
}

/* back face contents */
.pkp_structure_main .ia-eb-back .ia-eb-name { font-size: var(--fs-body); }
.pkp_structure_main .ia-eb-country {
  margin: 0; font-size: var(--fs-caption); font-weight: 600;
  color: var(--th-accent); letter-spacing: .03em;
}
.pkp_structure_main .ia-eb-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pkp_structure_main .ia-eb-tags span {
  border: 1px solid var(--th-hairline); border-radius: var(--r-pill);
  padding: 2px 9px; font-size: 11px; color: var(--th-ink-2); background: var(--th-canvas);
}
.pkp_structure_main .ia-eb-aff-full {
  margin: 0; font-size: var(--fs-caption); color: var(--th-ink-2); line-height: 1.5;
}
.pkp_structure_main .ia-eb-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--sp-2); }
.pkp_structure_main .ia-eb-link {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--th-hairline); border-radius: var(--r-pill);
  padding: 4px 11px 4px 9px;
  font-size: 11px; font-weight: 600;
  color: var(--th-accent) !important; text-decoration: none !important;
  background: var(--th-canvas);
  transition: background .15s ease, color .15s ease;
}
.pkp_structure_main .ia-eb-link:hover { background: var(--th-accent); color: #fff !important; }
.pkp_structure_main .ia-eb-link::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center/contain var(--icon); mask: no-repeat center/contain var(--icon);
}
.pkp_structure_main .ia-eb-link-orcid { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M9 8v9M9 5.5v.01M13 8h2a4.5 4.5 0 0 1 0 9h-2V8Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.pkp_structure_main .ia-eb-link-scholar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1.5 9 12 15l10.5-6L12 3Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M6 11.5V17c0 1.7 2.7 3 6 3s6-1.3 6-3v-5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.pkp_structure_main .ia-eb-link-scopus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6.5C14.8 5.5 13.4 5 12 5 8.5 5 6 7.5 6 10.5c0 5 10 3.5 10 7.5 0 2-1.8 3-4 3-1.6 0-3.1-.5-4.3-1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pkp_structure_main .ia-eb-link-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }

@media (max-width: 760px) {
  .pkp_structure_main .ia-eb-chief { flex-direction: column; }
  .pkp_structure_main .ia-eb-chief img { width: 120px; height: 120px; }
}
/* a flip is decoration: without motion the back simply replaces the front */
@media (prefers-reduced-motion: reduce) {
  .pkp_structure_main .ia-eb-inner { transition: none; }
}
@media print {
  .pkp_structure_main .ia-eb-filter, .pkp_structure_main .ia-eb-hint { display: none; }
  .pkp_structure_main .ia-eb-inner { transform: none !important; }
  .pkp_structure_main .ia-eb-back { position: static; transform: none; }
}