/**
 * Siddhanta Journal of Indian Knowledge Systems — house theme
 *
 * Light, calm, scholarly. Structure follows the Journal of Tibetan Literature:
 * a white masthead rather than a saturated colour band, warm cream section
 * bands (#F8F7F5), dark grey body text, and one restrained accent.
 *
 * The accent is Siddhanta's own — the seal's vermillion #DA2C13, muted to
 * #B33A29 so it sits at the same visual weight as JTL's brick red while
 * staying true to the Foundation's mark. Gold is taken down to #B8860B for
 * use on white, where the seal's #FFEB00 is unreadable.
 *
 * Light only. No dark mode: `color-scheme: light` also stops Chrome on
 * Android force-darkening the page.
 * No @import and no external requests — nothing leaves the visitor's browser.
 */

:root {
  color-scheme: light;

  /* surfaces */
  --bg:      #FFFFFF;
  --bg-alt:  #FDFAF5;   /* warm cream band */
  --bg-deep: #6B3208;   /* footer */

  /* ink */
  --ink:   #241A12;
  --body:  #4A3B30;
  --muted: #8A7565;
  --line:  #EDE4DA;
  --line-soft: #F5EFE7;

  /* accent — the seal's vermillion, muted for large areas */
  --accent:     #B8410F;
  --accent-dk:  #8A3106;
  --accent-soft:#FFF3E9;
  --gold:       #B8860B;
  --gold-soft:  #FAF4E4;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           "Noto Serif Devanagari", "Nirmala UI", "Kohinoor Devanagari",
           Georgia, ui-serif, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           "Noto Sans Devanagari", "Nirmala UI", Arial, sans-serif;

  --r: 6px;
  --sh: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.14);
  --sh-lift: 0 2px 6px rgba(0,0,0,.06), 0 18px 40px -20px rgba(0,0,0,.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================ foundations */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-alt); }

body, .pkp_structure_page {
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg-alt);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.pkp_structure_main h1, .pkp_structure_main h2,
.pkp_structure_main h3, .pkp_structure_main h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.003em;
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 2px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}

/* ============================================================== top strip */

.skf-topbar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}
.skf-topbar-in {
  max-width: 1140px; margin: 0 auto; padding: .5rem 1.4rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.skf-oa {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--accent); font-weight: 650; letter-spacing: .02em;
}

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

.pkp_structure_head {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: visible;
}
.pkp_structure_head::after { content: none; }
.pkp_head_wrapper { position: relative; }

.pkp_site_name_wrapper {
  height: auto !important;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 0 1.4rem;
  flex-wrap: nowrap;
}

/* logo in normal flow — the parent absolutely positions it */
.pkp_site_name {
  position: static !important;
  left: auto !important; right: auto !important;
  padding-left: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  margin: 0 !important;
  order: 2; flex: 0 0 auto; line-height: 0;
}
.pkp_site_name img, .pkp_site_name .is_img img {
  background: transparent !important; padding: 0 !important; border-radius: 0 !important;
  height: 80px; width: 80px; max-height: none;
  transition: transform .5s var(--ease);
}
.pkp_site_name a:hover img { transform: rotate(-4deg) scale(1.03); }

/* the journal name is otherwise screen-reader only */
.pkp_site_name_wrapper .pkp_screen_reader {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important; white-space: nowrap !important;
}

.skf-mast-text { order: 3; flex: 1 1 auto; min-width: 0; }
.skf-mast-title {
  display: block; font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.95rem);
  font-weight: 600; line-height: 1.22; color: var(--ink);
  letter-spacing: -.012em; text-decoration: none;
}
.skf-mast-title:hover { color: var(--accent); text-decoration: none; }
.skf-mast-deva {
  font-family: var(--serif); color: var(--accent);
  font-size: 1rem; margin-top: .3rem; line-height: 1.4;
}
.skf-mast-sub { color: var(--muted); font-size: .88rem; margin-top: .18rem; line-height: 1.45; }
.skf-mast-meta { order: 8; margin-left: auto; text-align: right; flex: 0 0 auto; }
.skf-issn { color: var(--muted); font-style: italic; font-size: .8rem; }

/* menu button — right side. `relative`, never `static`: the parent anchors
   the icon with .pkp_site_nav_toggle > span { position:absolute; top:50% }. */
.pkp_site_nav_toggle {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 46px !important; height: 46px !important;
  box-shadow: none !important;
  order: 9; margin-left: auto; align-self: center;
  flex: 0 0 auto; min-width: 46px; min-height: 46px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.pkp_site_nav_toggle:hover { background: var(--bg-alt); border-color: var(--accent); }
.pkp_site_nav_toggle:active { transform: scale(.95); }
.pkp_site_nav_toggle > span { border-bottom-color: var(--ink) !important; }
.pkp_site_nav_toggle > span:before,
.pkp_site_nav_toggle > span:after { background: var(--ink) !important; }

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

.pkp_navigation_primary_row {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.pkp_navigation_primary > li > a {
  color: var(--body); font-size: .92rem; font-weight: 500;
  padding: .9rem .9rem; position: relative;
  transition: color .2s var(--ease);
}
.pkp_navigation_primary > li > a::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .5rem;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus { color: var(--accent); text-decoration: none; }
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li.current > a::after { transform: scaleX(1); }
.pkp_navigation_primary > li.current > a { color: var(--accent); font-weight: 650; }

.pkp_navigation_primary ul {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lift); padding: .3rem 0;
}
.pkp_navigation_primary ul li a { padding: .55rem 1rem; font-size: .89rem; }
.pkp_navigation_primary ul li a:hover { background: var(--bg-alt); color: var(--accent); }

.pkp_navigation_search_wrapper a,
.pkp_navigation_user_wrapper a,
.pkp_navigation_user > li > a { color: var(--body); font-size: .88rem; }
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_user_wrapper a:hover { color: var(--accent); text-decoration: none; }

/* ================================================================= content */

.pkp_structure_content { background: var(--bg-alt); padding-top: 1.8rem; }
.pkp_structure_main {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 2rem 2.2rem 2.4rem;
}
.pkp_structure_main > *:first-child { margin-top: 0; }
.pkp_structure_main .cmp_notification:empty { display: none; }

.cmp_breadcrumbs { font-size: .84rem; color: var(--muted); margin-bottom: 1rem; }
.cmp_breadcrumbs .separator { opacity: .45; padding: 0 .35rem; }

.page > h1:first-child,
.pkp_structure_main h1.page_title,
.pkp_structure_main > h1:first-of-type {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 1.1rem; padding-bottom: .8rem;
  border-bottom: 2px solid var(--line);
}

.page_submissions .author_guidelines,
.page_about .about_site, .privacy_statement { max-width: 74ch; }

.submission_checklist ul { list-style: none; padding-left: 0; }
.submission_checklist li {
  position: relative; padding: .5rem 0 .5rem 1.75rem;
  border-bottom: 1px solid var(--line-soft); font-size: .96rem;
}
.submission_checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: .5rem;
  color: var(--accent); font-weight: 700;
}

/* ============================================================ issue + hero */

.skf-hero { margin: 0 0 2.4rem; }
.skf-hero-grid { display: grid; grid-template-columns: 190px 1fr; gap: 2rem; align-items: start; }

.skf-eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .45rem;
}
.skf-hero-title { font-size: 1.5rem; margin: .1rem 0 .7rem; line-height: 1.3; }
.skf-hero-title a { color: var(--ink); }
.skf-hero-title a:hover { color: var(--accent); text-decoration: none; }

/* issue cover — a quiet card, not a loud gradient */
.skf-cover {
  aspect-ratio: 3/4; border-radius: var(--r);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  color: var(--body); padding: 1.2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  text-align: left;
}
.skf-cover:hover { box-shadow: var(--sh-lift); transform: translateY(-3px); }
.skf-cover-top {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; line-height: 1.5;
}
.skf-cover-om { font-family: var(--serif); font-size: 2.6rem; color: var(--gold); line-height: 1; }
.skf-cover-bot {
  font-size: .72rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: .6rem; line-height: 1.45;
}
.skf-cover-link { width: 100%; justify-content: center; margin-top: .8rem; }

.obj_issue_toc .heading { padding-bottom: .6rem; margin-bottom: .4rem; }
.obj_issue_toc .description { color: var(--body); max-width: 68ch; line-height: 1.68; }
.obj_issue_toc .description p { margin: 0 0 .6rem; }
.obj_issue_toc .published { font-size: .9rem; color: var(--muted); margin-top: .3rem; }
.obj_issue_toc .published strong { color: var(--ink); font-weight: 650; }
.skf-hero-body .obj_issue_toc .heading { border-bottom: none; }

.obj_issue_toc .cover img, .obj_issue_summary .cover img {
  border-radius: var(--r); box-shadow: var(--sh);
}

/* section names */
.obj_issue_toc .sections .section > h3,
.sections .section > h3 {
  font-family: var(--sans);
  font-size: .76rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin: 2rem 0 .3rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.3;
}
.sections .section:first-child > h3 { margin-top: 1.1rem; }

/* ============================================================ article rows */

ul.cmp_article_list, ul.cmp_article_list.articles { list-style: none; padding-left: 0; margin: 0; }
ul.cmp_article_list > li { margin: 0; }

.obj_article_summary {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.obj_article_summary:last-child { border-bottom: none; }
.obj_article_summary > h4.title {
  font-family: var(--serif); font-size: 1.16rem; line-height: 1.38;
  margin: 0 0 .32rem; font-weight: 600;
}
.obj_article_summary > h4.title > a {
  color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease), color .2s var(--ease);
  text-decoration: none;
}
.obj_article_summary:hover > h4.title > a,
.obj_article_summary > h4.title > a:hover {
  background-size: 100% 1px; color: var(--accent); text-decoration: none;
}
.obj_article_summary .meta .authors { font-size: .95rem; color: var(--muted); line-height: 1.5; }
.obj_article_summary .meta .pages { font-size: .88rem; color: var(--muted); margin-top: .12rem; }

.obj_galley_link, .galleys_links .obj_galley_link {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .82rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--accent); padding: .3rem .7rem; border-radius: var(--r);
  text-decoration: none; margin-top: .55rem;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.obj_galley_link:hover {
  background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none;
}
.obj_article_summary ul.galleys_links { list-style: none; padding-left: 0; margin: .5rem 0 0; }
.obj_article_summary ul.galleys_links:empty { display: none; margin: 0; }

/* =========================================================== article page */

.obj_article_details > .page_title { font-size: clamp(1.5rem,3vw,1.95rem); line-height: 1.3; margin-bottom: .6rem; }
.obj_article_details .authors .author_name { font-weight: 650; color: var(--ink); }
.obj_article_details .item.abstract { line-height: 1.75; }
.obj_article_details .item h2, .obj_article_details .item.abstract h2 {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .5rem;
}
.obj_article_details .item { padding: 1.15rem 0; border-top: 1px solid var(--line-soft); }
.obj_article_details .entry_details .item {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.15rem; margin-bottom: .85rem;
}

/* ================================================================ buttons */

.cmp_button, .pkp_button, button.submit, input[type="submit"], .skf-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: var(--r); padding: .62rem 1.2rem;
  font-size: .92rem; font-weight: 650; font-family: var(--sans);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .15s var(--ease);
}
.cmp_button, .pkp_button, button.submit, input[type="submit"], .skf-btn-solid {
  background: var(--accent); color: #fff;
}
.cmp_button:hover, .pkp_button:hover, button.submit:hover,
input[type="submit"]:hover, .skf-btn-solid:hover {
  background: var(--accent-dk); color: #fff; text-decoration: none;
}
.cmp_button:active, .pkp_button:active, button.submit:active { transform: translateY(1px); }
.skf-btn-outline, .skf-btn-ghost {
  background: var(--bg); color: var(--accent); border-color: var(--line);
}
.skf-btn-outline:hover, .skf-btn-ghost:hover {
  background: var(--bg-alt); border-color: var(--accent); color: var(--accent-dk); text-decoration: none;
}
.skf-btn-gold { background: var(--accent); color: #fff; }
.skf-btn-gold:hover { background: var(--accent-dk); color: #fff; text-decoration: none; }
.skf-arw { transition: transform .25s var(--ease); }
.skf-btn:hover .skf-arw { transform: translateX(3px); }

/* ================================================================== forms */

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], select, textarea {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .62rem .8rem; font-family: var(--sans); font-size: .95rem;
  color: var(--body); background: var(--bg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179,58,41,.12); outline: none;
}

/* ================================================================= tables */

.pkp_structure_main table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.pkp_structure_main th {
  text-align: left; font-family: var(--sans); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; padding: .65rem .75rem; border-bottom: 2px solid var(--line);
}
.pkp_structure_main td { padding: .7rem .75rem; border-bottom: 1px solid var(--line-soft); }
.pkp_structure_main tbody tr:hover { background: var(--bg-alt); }

/* ================================================= sections + cards + CFP */

.skf-sechead { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 1.2rem; flex-wrap: wrap; }
.skf-sechead h2 { font-size: 1.4rem; margin: 0; }
.skf-rule { flex: 1; height: 1px; background: var(--line); min-width: 2rem; }
.skf-sechead a { font-size: .88rem; font-weight: 600; }

.skf-cats { margin: 0 0 2.4rem; padding-top: 1.9rem; border-top: 1px solid var(--line); }
.skf-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; }
.skf-cat {
  display: block; background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.35rem 1.25rem;
  position: relative; overflow: hidden; text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.skf-cat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.skf-cat:hover {
  background: var(--bg); border-color: var(--line);
  transform: translateY(-3px); box-shadow: var(--sh-lift); text-decoration: none;
}
.skf-cat:hover::before { transform: scaleY(1); }
.skf-cat h3 { font-size: 1.08rem; margin: 0 0 .4rem; color: var(--ink); }
.skf-cat p { font-size: .93rem; margin: 0; color: var(--muted); line-height: 1.58; }

.skf-cfp {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 1.9rem 2rem; margin: 0 0 1rem;
}
.skf-cfp h2 { font-size: 1.5rem; margin: 0 0 .6rem; max-width: 32ch; color: var(--ink); }
.skf-eyebrow-gold { color: var(--accent); }
.skf-cfp-text { color: var(--body); font-size: .98rem; max-width: 64ch; margin: 0 0 1.2rem; }
.skf-cfp-text strong { color: var(--ink); }
.skf-cfp-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

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

.pkp_structure_footer_wrapper { background: var(--bg-deep); color: #CFC7BE; margin-top: 3rem; }
.pkp_structure_footer { padding: 2.6rem 0 1.4rem; font-size: .93rem; }
.pkp_structure_footer a { color: #CFC7BE; transition: color .2s var(--ease); }
.pkp_structure_footer a:hover { color: #fff; text-decoration: none; }

.skf-foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.9rem; margin-bottom: 1.8rem;
}
.skf-foot-col h4 {
  color: #fff; font-family: var(--sans); font-size: .76rem;
  letter-spacing: .15em; text-transform: uppercase; font-weight: 700; margin: 0 0 .8rem;
}
.skf-foot-col a { display: block; padding: .26rem 0; font-size: .92rem; }
.skf-foot-col a:hover { transform: translateX(3px); }
.skf-foot-legal {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem;
}
.pkp_structure_footer .skf-issn { color: #A99E93; }
.pkp_brand_footer {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.1rem; margin-top: 1.1rem; opacity: .55;
}
.pkp_brand_footer img { filter: brightness(0) invert(1); }

/* ================================================================== misc */

blockquote {
  border-left: 3px solid var(--accent); background: var(--bg-alt);
  padding: .9rem 1.2rem; margin: 1.1rem 0; border-radius: 0 var(--r) var(--r) 0;
}
hr { border: none; border-top: 1px solid var(--line); margin: 1.8rem 0; }
::selection { background: var(--accent-soft); color: var(--ink); }
[lang="sa"], [lang="hi"], .devanagari { line-height: 1.9; }

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

@media (max-width: 1024px) { .pkp_structure_main { padding: 1.7rem 1.6rem 2rem; } }

@media (max-width: 860px) {
  .skf-hero-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .skf-mast-meta { display: none; }
}

@media (max-width: 767px) {
  body, .pkp_structure_page { font-size: 17px; }
  .skf-topbar-in { padding: .45rem 1.1rem; font-size: .8rem; }
  .skf-topbar-note { display: none; }

  .pkp_site_name_wrapper { padding: 1rem 0 .95rem; gap: .8rem; }
  .pkp_site_name img, .pkp_site_name .is_img img { height: 54px; width: 54px; }
  .skf-mast-title { font-size: 1.24rem; }
  .skf-mast-deva { font-size: .98rem; }
  .skf-mast-sub { display: none; }

  .pkp_structure_content { padding-top: 1rem; }
  .pkp_structure_main { padding: 1.4rem 1.2rem 1.7rem; }
  .page > h1:first-child, .pkp_structure_main h1.page_title { font-size: 1.4rem; }

  /* cover becomes a wide banner — a 3:4 card wasted two-thirds of the width */
  .skf-hero-cover { max-width: none; }
  .skf-cover {
    aspect-ratio: auto; min-height: 108px;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.2rem;
  }
  .skf-cover:hover { transform: none; }
  .skf-cover-top { flex: 1 1 auto; font-size: .76rem; }
  .skf-cover-om { font-size: 2.8rem; flex: 0 0 auto; }
  .skf-cover-bot { display: none; }
  .skf-cover-link { width: auto; margin-top: .7rem; }

  .skf-hero-title { font-size: 1.4rem; }
  .obj_article_summary > h4.title { font-size: 1.14rem; }
  .sections .section > h3 { margin: 1.7rem 0 .3rem; }

  .skf-cats { padding-top: 1.4rem; }
  .skf-cat-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .skf-cat { padding: 1.05rem .95rem; }
  .skf-cat h3 { font-size: 1rem; }
  .skf-cat p { font-size: .89rem; }
  .skf-cfp { padding: 1.4rem 1.3rem; }
  .skf-cfp h2 { font-size: 1.3rem; }
  .skf-cfp-actions .skf-btn { width: 100%; justify-content: center; }

  .pkp_navigation_primary > li > a {
    font-size: 1rem; padding: .8rem .6rem; min-height: 44px; display: flex; align-items: center;
  }
  .pkp_navigation_primary > li > a::after { display: none; }
  .pkp_navigation_primary > li.current > a { background: var(--bg-alt); border-radius: var(--r); }

  .skf-foot-grid { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
  .pkp_structure_footer { padding: 1.9rem 0 1.1rem; }
}

@media (max-width: 430px) {
  .skf-cat-grid, .skf-foot-grid { grid-template-columns: 1fr; }
  .pkp_site_name img, .pkp_site_name .is_img img { height: 46px; width: 46px; }
  .skf-mast-title { font-size: 1.12rem; }
  .skf-cover-om { font-size: 2.3rem; }
  .pkp_structure_main { padding: 1.15rem 1rem 1.4rem; }
  .cmp_button, .pkp_button, .skf-btn { width: 100%; justify-content: center; }
}

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

@media print {
  .pkp_structure_head, .pkp_structure_footer_wrapper, .skf-topbar,
  .pkp_navigation_primary_row, .cmp_breadcrumbs, .skf-cfp, .skf-cats { display: none !important; }
  .pkp_structure_main { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   FORMS — login, registration and any .cmp_form
   OJS ships these as bare label/input pairs. Give them a real card, clear
   field grouping and comfortable touch targets.
   ========================================================================== */

.page_login .pkp_structure_main,
.page_register .pkp_structure_main { max-width: 720px; margin-inline: auto; }

.cmp_form { margin-top: .5rem; }
.cmp_form .fields { display: block; }

.cmp_form .fields > div {
  margin-bottom: 1.15rem;
}
.cmp_form label,
.cmp_form .label {
  display: block;
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: .01em;
  margin-bottom: .38rem;
}
.cmp_form .label .required,
.cmp_form .required { color: var(--accent); }

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form select,
.cmp_form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .78rem .9rem;
  font-size: 1rem;
  line-height: 1.4;
  background: var(--bg);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.cmp_form input:hover, .cmp_form select:hover, .cmp_form textarea:hover { border-color: #CFC7BC; }
.cmp_form input:focus, .cmp_form select:focus, .cmp_form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(179,58,41,.13);
  background: var(--bg);
  outline: none;
}
.cmp_form input::placeholder, .cmp_form textarea::placeholder { color: #A79E94; }

/* name fields side by side where there is room */
.cmp_form .identity { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cmp_form .identity > div { margin-bottom: 0; }

/* consent / opt-in rows read as statements, not fields */
.cmp_form .optin,
.cmp_form .consent {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .85rem 1rem;
  margin-bottom: .8rem;
}
.cmp_form .optin input[type="checkbox"],
.cmp_form .consent input[type="checkbox"] {
  width: 18px; height: 18px; margin: .18rem 0 0; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
.cmp_form .optin label,
.cmp_form .consent label {
  margin: 0; font-weight: 400; font-size: .92rem;
  line-height: 1.55; color: var(--body); cursor: pointer;
}

/* action row */
.cmp_form .buttons {
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.cmp_form .buttons button,
.cmp_form .buttons input[type="submit"] {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--r); padding: .72rem 1.6rem;
  font-size: .98rem; font-weight: 650; cursor: pointer;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.cmp_form .buttons button:hover,
.cmp_form .buttons input[type="submit"]:hover { background: var(--accent-dk); }
.cmp_form .buttons button:active { transform: translateY(1px); }
.cmp_form .buttons a { font-size: .92rem; }

/* "remember me" and similar inline checkboxes */
.cmp_form .remember { display: flex; align-items: center; gap: .55rem; }
.cmp_form .remember label { margin: 0; font-weight: 400; font-size: .93rem; }
.cmp_form .remember input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--accent); margin: 0;
}

/* footer links under the login card */
.page_login .cmp_form + p,
.page_register .cmp_form + p { margin-top: 1.2rem; font-size: .93rem; }

/* validation */
.cmp_form .error, .pkp_form_error, .cmp_form .pkp_form_error {
  color: var(--accent-dk); font-size: .88rem; margin-top: .35rem; font-weight: 500;
}
.cmp_form input.error, .cmp_form select.error { border-color: var(--accent); }

@media (max-width: 600px) {
  .cmp_form .identity { grid-template-columns: 1fr; gap: 0; }
  .cmp_form .identity > div { margin-bottom: 1.15rem; }
  .cmp_form input[type="text"], .cmp_form input[type="email"],
  .cmp_form input[type="password"], .cmp_form select, .cmp_form textarea {
    font-size: 16px;  /* prevents iOS zoom-on-focus */
    padding: .8rem .85rem;
  }
  .cmp_form .buttons { flex-direction: column; align-items: stretch; }
  .cmp_form .buttons button, .cmp_form .buttons input[type="submit"] { width: 100%; }
  .cmp_form .buttons a { text-align: center; }
}

/* ==========================================================================
   WIREFRAME FINISH
   Restores the warm treatments from the approved wireframe: gradient top
   strip, gradient masthead, gradient issue cover and call-for-papers band.
   Layout, form styling, type scale and light-only behaviour are unchanged.
   ========================================================================== */

:root {
  --warm-1: #C2510B;
  --warm-2: #8A3606;
  --warm-3: #6B3208;
  --gold-bright: #FFEB00;
}

/* --- top strip ----------------------------------------------------------- */
.skf-topbar { background: var(--warm-3); border-bottom: none; color: #F3D9BE; }
.skf-oa {
  color: var(--gold-bright); font-weight: 650;
  background: rgba(255,235,0,.13); border: 1px solid rgba(255,235,0,.32);
  padding: .1rem .6rem; border-radius: 999px;
}

/* --- masthead ------------------------------------------------------------ */
.pkp_structure_head {
  background: linear-gradient(158deg, var(--warm-1) 0%, var(--warm-2) 58%, var(--warm-3) 100%);
  border-bottom: none;
  /* must stay visible — `hidden` clipped the About dropdown, which is why the
     submenu never appeared even though the markup and hover rules were right */
  overflow: visible;
}
.pkp_structure_head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 320px at 88% -25%, rgba(255,235,0,.20), transparent 60%);
}
.pkp_head_wrapper { position: relative; z-index: 1; }

.skf-mast-title { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.2); }
.skf-mast-title:hover { color: var(--gold-bright); }
.skf-mast-deva { color: var(--gold-bright); }
.skf-mast-sub  { color: #F8E2CC; }
.skf-issn      { color: var(--gold-bright); opacity: .9; }
.pkp_site_name img, .pkp_site_name .is_img img {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

.pkp_site_nav_toggle {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.28) !important;
}
.pkp_site_nav_toggle:hover { background: rgba(255,255,255,.22) !important; }
.pkp_site_nav_toggle > span { border-bottom-color: #fff !important; }
.pkp_site_nav_toggle > span:before,
.pkp_site_nav_toggle > span:after { background: #fff !important; }

.pkp_navigation_search_wrapper a,
.pkp_navigation_user_wrapper a,
.pkp_navigation_user > li > a { color: #F8E2CC; }
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_user_wrapper a:hover { color: var(--gold-bright); }

/* --- issue cover --------------------------------------------------------- */
.skf-cover {
  background: linear-gradient(155deg, var(--warm-1), var(--warm-2) 60%, #5C2A05);
  border: none; border-top: none;
  color: #fff; position: relative; overflow: hidden;
}
.skf-cover::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(240px 160px at 82% 8%, rgba(255,235,0,.24), transparent 68%);
}
.skf-cover > * { position: relative; z-index: 1; }
.skf-cover-top { color: var(--gold-bright); }
.skf-cover-om  { color: var(--gold-bright); }
.skf-cover-bot { color: #F0CFAE; border-top-color: rgba(255,255,255,.22); }

/* --- call for papers ----------------------------------------------------- */
.skf-cfp {
  background: linear-gradient(135deg, var(--warm-1) 0%, #7A3305 100%);
  border: none; border-left: none;
  color: #fff; position: relative; overflow: hidden;
}
.skf-cfp::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px 240px at 12% 118%, rgba(255,235,0,.18), transparent 66%);
}
.skf-cfp > * { position: relative; z-index: 1; }
.skf-cfp h2 { color: #fff; }
.skf-cfp-text { color: #F8E2CC; }
.skf-cfp-text strong { color: #fff; }
.skf-eyebrow-gold { color: var(--gold-bright); }
.skf-cfp .skf-btn-gold {
  background: var(--gold-bright); color: var(--warm-3);
  box-shadow: 0 3px 12px rgba(255,235,0,.28);
}
.skf-cfp .skf-btn-gold:hover { background: #FFF35C; color: var(--warm-3); }
.skf-cfp .skf-btn-outline {
  background: transparent; border-color: rgba(255,255,255,.5); color: #fff;
}
.skf-cfp .skf-btn-outline:hover { background: rgba(255,255,255,.14); color: #fff; }

/* --- footer -------------------------------------------------------------- */
.pkp_structure_footer_wrapper { background: var(--warm-3); color: #E8C9A8; }
.pkp_structure_footer a { color: #E8C9A8; }
.pkp_structure_footer a:hover { color: var(--gold-bright); }
.pkp_structure_footer .skf-issn { color: #E8C9A8; opacity: .8; }

/* ==========================================================================
   NAVIGATION BAR — full width
   The nav now sits outside .pkp_head_wrapper (which the parent pins to
   1160px), so the white bar spans the window and re-centres its contents.
   ========================================================================== */

.skf-navbar { display: block; width: 100%; }
.pkp_navigation_primary_row {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(36,26,18,.04);
  width: 100%;
}
.pkp_navigation_primary_wrapper {
  max-width: 1160px; margin: 0 auto; padding: 0 1.2rem;
  display: flex; align-items: center; gap: .3rem; width: auto;
}
.pkp_navigation_primary {
  display: flex; align-items: center; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none; flex: 1 1 auto;
}
.pkp_navigation_primary > li { position: relative; margin: 0; }

.pkp_navigation_primary > li > a {
  display: block; margin: 0 !important; border-bottom: 0 !important;
  color: var(--body) !important; padding: 1rem .9rem !important;
  font-size: .93rem; font-weight: 500; text-decoration: none;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: var(--accent) !important; background: transparent !important; outline: 0;
}
.pkp_navigation_primary > li > a::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .55rem;
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.pkp_navigation_primary > li > a:hover::after { transform: scaleX(1); }

/* active page */
.pkp_navigation_primary > li.current > a { color: var(--accent) !important; font-weight: 700; }
.pkp_navigation_primary > li.current > a::after { transform: scaleX(1); }

/* --- submenu ------------------------------------------------------------- */
.pkp_navigation_primary > li > ul {
  display: none;
  position: absolute; top: 100%; left: 0;
  transform: none !important;
  min-width: 250px; margin: 0; padding: .4rem 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lift);
  list-style: none; z-index: 300;
}
.pkp_navigation_primary > li:hover > ul,
.pkp_navigation_primary > li:focus-within > ul { display: block; }
.pkp_navigation_primary > li:hover ul { position: absolute; }
.pkp_navigation_primary > li > ul > li { margin: 0; }
.pkp_navigation_primary > li > ul > li > a {
  display: block; padding: .6rem 1.1rem !important; margin: 0 !important;
  font-size: .9rem; color: var(--body) !important; white-space: nowrap;
  border-bottom: 0 !important;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.pkp_navigation_primary > li > ul > li > a:hover {
  background: var(--bg-alt); color: var(--accent) !important;
}
.pkp_navigation_primary > li > ul > li.current > a { color: var(--accent) !important; font-weight: 650; }

/* --- Submit as a button, as in the wireframe ----------------------------- */
.pkp_navigation_primary > li > a[href$="/submission"] {
  background: var(--accent); color: #fff !important;
  border-radius: 8px; padding: .55rem 1.1rem !important;
  margin: 0 0 0 .5rem !important; font-weight: 650;
  box-shadow: 0 2px 8px rgba(184,65,15,.28);
  transition: background .2s var(--ease), transform .16s var(--ease), box-shadow .25s var(--ease);
}
.pkp_navigation_primary > li > a[href$="/submission"]::after { display: none; }
.pkp_navigation_primary > li > a[href$="/submission"]:hover {
  background: var(--accent-dk); color: #fff !important;
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(184,65,15,.36);
}

.pkp_navigation_search_wrapper { flex: 0 0 auto; margin-left: .4rem; }
.pkp_navigation_search_wrapper a { color: var(--muted) !important; font-size: .9rem; }
.pkp_navigation_search_wrapper a:hover { color: var(--accent) !important; }

/* user links stay in the masthead, top right */
.pkp_navigation_user_wrapper {
  position: absolute; top: .6rem; right: 0; z-index: 5;
}
.pkp_navigation_user { display: flex; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.pkp_navigation_user > li > a {
  color: #F8E2CC !important; font-size: .86rem; padding: .3rem .7rem; display: block;
}
.pkp_navigation_user > li > a:hover { color: var(--gold-bright) !important; text-decoration: none; }

/* ==========================================================================
   ARTICLE PAGE — the two columns were stacking and breaking
   ========================================================================== */

.obj_article_details { display: block; }
.obj_article_details .page_title {
  font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.3;
  margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--line);
}
.obj_article_details > .row,
.obj_article_details .main_entry ~ .entry_details { margin: 0; }

@supports (display: grid) {
  .obj_article_details {
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    grid-template-areas: "title title" "main side";
    gap: 0 2.2rem;
    align-items: start;
  }
  .obj_article_details > .page_title { grid-area: title; }
  .obj_article_details .main_entry { grid-area: main; min-width: 0; }
  .obj_article_details .entry_details { grid-area: side; min-width: 0; }
}

.obj_article_details .main_entry .item { padding: 1.15rem 0; border-top: 1px solid var(--line-soft); }
.obj_article_details .main_entry .item:first-child { border-top: 0; padding-top: .4rem; }
.obj_article_details .item .label {
  display: block; font-family: var(--sans); font-size: .74rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: .5rem;
}
.obj_article_details .item.authors .name { font-weight: 650; color: var(--ink); font-size: 1.02rem; }
.obj_article_details .item.abstract { line-height: 1.75; }
.obj_article_details .item.abstract p { margin: 0 0 .9rem; }

.obj_article_details .entry_details .item {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--r); padding: .95rem 1.1rem; margin: 0 0 .85rem;
  border-top: 1px solid var(--line);
}
.obj_article_details .entry_details .item .label { margin-bottom: .3rem; }
.obj_article_details .entry_details .item a { font-weight: 500; }

/* ==========================================================================
   FORMS — tighten the vertical rhythm
   ========================================================================== */

.cmp_form .fields > div { margin-bottom: .85rem; }
.cmp_form .fields > div > label,
.cmp_form .fields > div > .label { margin-bottom: .3rem; }
.cmp_form .fields br { display: none; }
.cmp_form input[type="text"], .cmp_form input[type="email"],
.cmp_form input[type="password"], .cmp_form input[type="url"],
.cmp_form select, .cmp_form textarea { padding: .62rem .8rem; }
.cmp_form fieldset { border: 0; margin: 0 0 1.2rem; padding: 0; }
.cmp_form fieldset > legend,
.cmp_form h3, .cmp_form h2 {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  margin: 1.4rem 0 .7rem; padding: 0;
}
.cmp_form .fields > div:first-child { margin-top: 0; }
.cmp_form p { margin: 0 0 .9rem; }

/* ==========================================================================
   LOADING / REVEAL
   ========================================================================== */

.skf-reveal { opacity: 0; transform: translateY(14px); }
.skf-reveal.skf-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.skf-in { opacity: 1; }

/* first paint of the main card */
@keyframes skf-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pkp_structure_main { animation: skf-fade-up .45s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .skf-reveal, .skf-reveal.skf-in { opacity: 1 !important; transform: none !important; }
  .pkp_structure_main { animation: none; }
}

/* ==========================================================================
   NAV — mobile
   ========================================================================== */

@media (max-width: 767px) {
  .pkp_navigation_primary_wrapper { flex-direction: column; align-items: stretch; padding: 0 1rem; }
  .pkp_navigation_primary { flex-direction: column; align-items: stretch; }
  .pkp_navigation_primary > li > a {
    padding: .85rem .3rem !important; min-height: 44px;
    display: flex; align-items: center; border-bottom: 1px solid var(--line-soft) !important;
  }
  .pkp_navigation_primary > li > a::after { display: none; }
  .pkp_navigation_primary > li.current > a { background: var(--bg-alt); border-radius: 6px; padding-left: .7rem !important; }
  /* submenus open inline on a phone */
  .pkp_navigation_primary > li > ul {
    display: block; position: static; border: 0; box-shadow: none;
    padding: 0 0 .3rem .9rem; min-width: 0; background: transparent;
  }
  .pkp_navigation_primary > li > ul > li > a {
    padding: .6rem .3rem !important; font-size: .92rem; color: var(--muted) !important;
  }
  .pkp_navigation_primary > li > a[href$="/submission"] {
    margin: .7rem 0 .5rem !important; justify-content: center; border-bottom: 0 !important;
  }
  .pkp_navigation_user_wrapper { position: static; text-align: right; padding: .3rem 0 0; }
  .obj_article_details { display: block; }
  .obj_article_details .entry_details { margin-top: 1.4rem; }
}

/* ==========================================================================
   PARENT-THEME CORRECTIONS
   Specific rules inherited from the OJS default theme that fight this design.
   ========================================================================== */

/* The stray vertical rules on every page. The parent draws two 1px columns:
   .pkp_structure_main:before { left:0 } and :after { left:728px }. */
.pkp_structure_main:before,
.pkp_structure_main:after { display: none !important; content: none !important; }

/* Excessive gaps between form fields — the parent pads each row by 2.143rem */
.cmp_form .fields > div { padding-bottom: .35rem !important; margin-bottom: .8rem; }
.cmp_form .fields > div.remember,
.cmp_form .fields > div.optin,
.cmp_form .fields > div.consent { padding-bottom: 0 !important; }
.cmp_form legend {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  margin-bottom: .6rem; line-height: 1.4;
}

/* "Read more" and announcement links came through in PKP blue (#006798) */
.pkp_page_index .current_issue .read_more,
.read_more, .cmp_announcements .more a, .obj_announcement_summary a {
  color: var(--accent) !important;
}
.pkp_page_index .current_issue .read_more:hover,
.pkp_page_index .current_issue .read_more:focus,
.read_more:hover { color: var(--accent-dk) !important; }
/* the parent draws 1px separators around homepage announcements */
.pkp_page_index .cmp_announcements > .obj_announcement:after,
.pkp_page_index .cmp_announcements .more:before { display: none !important; content: none !important; }

/* Article page: the parent floats .main_entry at a fixed 428px with a border */
.obj_article_details .main_entry,
.obj_article_details .entry_details {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Login form was capped at 17em */
.page_login .login { max-width: none !important; margin-bottom: 0; }
.page_login .login input[type="text"],
.page_login .login input[type="password"] { width: 100%; }
.page_login .password a { font-size: .9rem; font-weight: 600; }

/* ==========================================================================
   NAVIGATION — submenu colours, caret, submit button
   ========================================================================== */

/* submenu links came through blue with a thick left border */
.pkp_nav_list ul a,
.pkp_navigation_primary ul a {
  border-left: 0 !important;
  padding-left: 1.1rem !important;
  color: var(--body) !important;
}
.pkp_nav_list ul a:hover, .pkp_nav_list ul a:focus,
.pkp_navigation_primary ul a:hover, .pkp_navigation_primary ul a:focus {
  background: var(--bg-alt) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
  outline: 0;
}

/* caret is defined once, further down, on .skf-has-sub */

/* Submit button. Matched with $= rather than *= so it lands only on the
   submission wizard itself: since the 2026 menu, "Submissions" is a dropdown
   parent pointing at /about/submissions and must stay a plain nav item. */
.pkp_navigation_primary > li > a[href$="/submission"],
.pkp_navigation_primary > li > a[href$="/submission"]:hover,
.pkp_navigation_primary > li > a[href$="/submission"]:focus,
.pkp_navigation_primary > li.current > a[href$="/submission"] {
  color: #fff !important;
  border-bottom: 0 !important;
  border-color: transparent !important;
}
.pkp_navigation_primary > li > a[href$="/submission"] { background: var(--accent) !important; }
.pkp_navigation_primary > li > a[href$="/submission"]:hover,
.pkp_navigation_primary > li > a[href$="/submission"]:focus { background: var(--accent-dk) !important; }
.pkp_navigation_primary > li > a[href$="/submission"]:after { display: none !important; content: none !important; }

/* stop the bar reflowing between pages — reserve its height */
.pkp_navigation_primary_row { min-height: 53px; }
.pkp_navigation_primary > li > a { line-height: 1.4; }

/* ==========================================================================
   MOBILE MENU — the parent's JS toggles .pkp_site_nav_menu--isOpen
   ========================================================================== */

@media (max-width: 767px) {
  .skf-navbar {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .38s var(--ease), opacity .28s var(--ease);
  }
  .skf-navbar.pkp_site_nav_menu--isOpen {
    max-height: 80vh;
    opacity: 1;
    overflow-y: auto;
  }
  .pkp_navigation_primary_row { min-height: 0; border-bottom: 0; }

  /* staggered entrance for the items */
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li {
    animation: skf-nav-in .32s var(--ease) both;
  }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(1) { animation-delay: .02s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(2) { animation-delay: .05s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(3) { animation-delay: .08s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(4) { animation-delay: .11s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(5) { animation-delay: .14s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(6) { animation-delay: .17s; }
  @keyframes skf-nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* caret points down inline; submenus are already expanded on mobile */
}

/* ==========================================================================
   FOOTER — links left aligned
   ========================================================================== */

.skf-foot-grid, .skf-foot-col { text-align: left; }
.skf-foot-col a { text-align: left; justify-content: flex-start; }
.skf-foot-legal { text-align: left; }

/* ==========================================================================
   Softer first paint — the translate was causing a visible jump per page
   ========================================================================== */
@keyframes skf-fade-up { from { opacity: 0; } to { opacity: 1; } }
.pkp_structure_main { animation: skf-fade-up .3s var(--ease) both; }

/* ==========================================================================
   SUBMENU — final, with the parent's Bootstrap conversion removed
   skf.js tags each parent item with .skf-has-sub, which is more dependable
   than :has() across browsers. Opening is pure CSS.
   ========================================================================== */

.pkp_navigation_primary > li.skf-has-sub { position: relative; }

.pkp_navigation_primary > li.skf-has-sub > ul,
.pkp_navigation_primary > li.skf-has-sub > ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  transform: none !important;
  min-width: 258px;
  margin: 0;
  padding: .4rem 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 6px 28px -8px rgba(36,26,18,.28);
  list-style: none;
  z-index: 400;
}
.pkp_navigation_primary > li.skf-has-sub:hover > ul,
.pkp_navigation_primary > li.skf-has-sub:focus-within > ul { display: block; }

/* a hover bridge, so the pointer can travel from label to panel */
.pkp_navigation_primary > li.skf-has-sub::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 8px; display: none;
}
.pkp_navigation_primary > li.skf-has-sub:hover::before { display: block; }

.pkp_navigation_primary > li.skf-has-sub > ul > li { margin: 0; display: block; }
.pkp_navigation_primary > li.skf-has-sub > ul > li > a {
  display: block; white-space: nowrap;
  padding: .62rem 1.15rem !important; margin: 0 !important;
  font-size: .9rem; font-weight: 500;
  color: var(--body) !important;
  border: 0 !important; background: transparent;
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.pkp_navigation_primary > li.skf-has-sub > ul > li > a:hover,
.pkp_navigation_primary > li.skf-has-sub > ul > li > a:focus {
  background: var(--bg-alt); color: var(--accent) !important; padding-left: 1.35rem !important;
}
.pkp_navigation_primary > li.skf-has-sub > ul > li.current > a {
  color: var(--accent) !important; font-weight: 650;
}

/* caret */
.pkp_navigation_primary > li.skf-has-sub > a { padding-right: 1.7rem !important; }
.pkp_navigation_primary > li.skf-has-sub > a::before {
  content: ""; position: absolute; right: .85rem; top: 50%;
  width: 0; height: 0; margin-top: -2px;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  opacity: .7;
  transform-origin: 50% 40%;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.pkp_navigation_primary > li.skf-has-sub:hover > a::before,
.pkp_navigation_primary > li.skf-has-sub:focus-within > a::before {
  transform: rotate(-180deg); opacity: 1;
}

@media (max-width: 767px) {
  /* inline, always open on a phone */
  .pkp_navigation_primary > li.skf-has-sub > ul,
  .pkp_navigation_primary > li.skf-has-sub > ul.dropdown-menu {
    display: block; position: static; min-width: 0;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 .4rem .9rem;
  }
  .pkp_navigation_primary > li.skf-has-sub > a::before { display: none; }
  .pkp_navigation_primary > li.skf-has-sub > a { padding-right: .3rem !important; }
  .pkp_navigation_primary > li.skf-has-sub > ul > li > a {
    color: var(--muted) !important; padding: .55rem .3rem !important; white-space: normal;
  }
}

/* ==========================================================================
   ISSUE LIST — spacing and alignment on the homepage
   The parent adds 2.143rem below every list item, absolutely positions the
   page range, and leaves a whitespace-only <ul class="galleys_links"> behind
   when an article has no PDF. Together these opened large blank gaps.
   ========================================================================== */

.sections .section { margin: 0 0 .4rem; }
.sections .section > h3 {
  display: block;
  margin: 1.8rem 0 .2rem;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--line);
  border-top: 0;
}
.sections .section:first-child > h3 { margin-top: .8rem; }
.sections .section > h3::after { content: none !important; }

ul.cmp_article_list { margin: 0 !important; padding: 0 !important; }
ul.cmp_article_list > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  border-bottom: 1px solid var(--line-soft);
}
ul.cmp_article_list > li:last-child { border-bottom: 0; }

.obj_article_summary {
  position: relative;
  padding: 1.05rem 0 1.1rem;
  margin: 0;
  border-bottom: 0;
}
.obj_article_summary > h4.title { margin: 0 0 .3rem; padding-right: 5rem; }
.obj_article_summary .meta { margin: 0; padding-right: 5rem; }
/* the page range is absolutely positioned by the parent — give it an anchor */
.obj_article_summary .pages {
  position: absolute; top: 1.15rem; right: 0; left: auto;
  line-height: 1.4; font-size: .88rem; color: var(--muted); margin: 0;
}
/* a galleys list that holds only whitespace is not :empty, so collapse it */
.obj_article_summary ul.galleys_links { margin: 0; padding: 0; min-height: 0; line-height: 0; }
.obj_article_summary ul.galleys_links > li { line-height: 1.4; margin: .5rem .6rem 0 0; display: inline-block; }
.obj_article_summary:before, .obj_article_summary:after { content: none !important; display: none !important; }

/* ==========================================================================
   SEARCH — the date dropdowns were clipping their selected value
   ========================================================================== */

.page_search select,
.cmp_form select,
select {
  height: auto;
  min-height: 2.6rem;
  line-height: 1.4;
  padding: .5rem 2rem .5rem .7rem;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.page_search .date_range select { min-width: 5.4em; margin-right: .3rem; }
.page_search .date_range { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.page_search fieldset {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.2rem; margin: 1rem 0;
}
.page_search fieldset legend { padding: 0 .5rem; }
.page_search .submit button { background: var(--accent); color: #fff; border-color: var(--accent); }
.page_search .search_results .obj_article_summary { margin: 0; }

/* ==========================================================================
   TOP STRIP — Register / Login / Submit
   ========================================================================== */

.skf-topbar-in { gap: 1.2rem; }
.skf-topbar-note { flex: 1 1 auto; }
.skf-topbar-actions { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }

.skf-top-submit {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff !important;
  padding: .2rem .8rem; border-radius: 999px;
  font-size: .8rem; font-weight: 650; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.skf-top-submit:hover {
  background: var(--gold-bright); border-color: var(--gold-bright);
  color: var(--warm-3) !important; text-decoration: none;
}

.skf-topbar .pkp_navigation_user_wrapper { position: static; }
.skf-topbar .pkp_navigation_user { display: flex; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.skf-topbar .pkp_navigation_user > li > a {
  color: #F3D9BE !important; font-size: .8rem; padding: .2rem .55rem; display: block;
}
.skf-topbar .pkp_navigation_user > li > a:hover { color: var(--gold-bright) !important; text-decoration: none; }

/* the masthead no longer carries user links */
.pkp_head_wrapper .pkp_navigation_user_wrapper { display: none; }
.pkp_site_name_wrapper { padding-top: 1.35rem; }

/* ==========================================================================
   SUBMENU PARENT — one caret only
   skf.js sets aria-haspopup, which re-triggers the parent theme's own caret
   on ::after — the same pseudo-element this theme uses for the underline.
   The two collided and drew a filled block above the arrow. Reset the
   inherited border properties so ::after is purely the underline, and let
   ::before be the only caret.
   ========================================================================== */

.pkp_navigation_primary > li.skf-has-sub > a::after,
.pkp_navigation_primary > li > a[aria-haspopup]::after {
  border: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  position: absolute !important;
  left: .9rem; right: 1.7rem; bottom: .55rem;
  height: 2px !important;
  border-radius: 2px;
  background: var(--accent) !important;
  content: "" !important;
  display: block !important;
  top: auto !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}
.pkp_navigation_primary > li.skf-has-sub:hover > a::after,
.pkp_navigation_primary > li.skf-has-sub.current > a::after { transform: scaleX(1); }

/* ==========================================================================
   ISSUE PAGE — it was rendering as bare text with no structure
   ========================================================================== */

.page_issue .obj_issue_toc,
.pkp_page_issue .obj_issue_toc { margin: 0; }

.pkp_page_issue .obj_issue_toc > .heading,
.page_issue .obj_issue_toc > .heading {
  padding-bottom: 1.2rem;
  margin-bottom: .6rem;
  border-bottom: 2px solid var(--line);
}
.pkp_page_issue .obj_issue_toc .title,
.pkp_page_issue .obj_issue_toc h1 {
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .7rem; line-height: 1.3;
}
.pkp_page_issue .obj_issue_toc .description { max-width: 70ch; margin-bottom: .5rem; }
.pkp_page_issue .obj_issue_toc .published { font-size: .92rem; color: var(--muted); }

/* issue cover beside the contents, as on the homepage */
.pkp_page_issue .obj_issue_toc .cover { float: none; margin: 0 0 1.4rem; max-width: 210px; }
.pkp_page_issue .obj_issue_toc .cover img { width: 100%; height: auto; border-radius: var(--r); }

/* galleys for the whole issue */
.pkp_page_issue .obj_issue_toc .galleys { margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.pkp_page_issue .obj_issue_toc .galleys h2 {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .6rem;
}

/* ==========================================================================
   GALLEY ICONS — FontAwesome 4.7 is already loaded by the parent
   ========================================================================== */

.obj_galley_link::before {
  font-family: FontAwesome;
  font-weight: normal; font-style: normal;
  margin-right: .1rem; font-size: .95em;
  -webkit-font-smoothing: antialiased;
}
.obj_galley_link.pdf::before  { content: "\f1c1"; }   /* file-pdf-o  */
.obj_galley_link.html::before,
.obj_galley_link.file::before { content: "\f0f6"; }   /* file-text-o */
.obj_galley_link.epub::before { content: "\f02d"; }   /* book        */
.obj_galley_link.xml::before  { content: "\f1c9"; }   /* file-code-o */

/* article sidebar cards added through the Templates::Article::Details hook */
.obj_article_details .entry_details .item.skf-cite p,
.obj_article_details .entry_details .item.skf-review p { margin: 0; font-size: .9rem; line-height: 1.55; }
.obj_article_details .entry_details .item.skf-cite em { font-style: italic; }

/* the galley buttons in the sidebar read as primary actions */
.obj_article_details .entry_details .item.galleys .obj_galley_link {
  display: flex; justify-content: center; width: 100%;
  padding: .6rem .9rem; font-size: .92rem; margin: 0 0 .5rem;
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.obj_article_details .entry_details .item.galleys .obj_galley_link:hover {
  background: var(--accent-dk); border-color: var(--accent-dk); color: #fff;
}
.obj_article_details .entry_details .item.galleys .obj_galley_link.file,
.obj_article_details .entry_details .item.galleys .obj_galley_link.html {
  background: var(--bg); color: var(--accent); border-color: var(--line);
}
.obj_article_details .entry_details .item.galleys .obj_galley_link.file:hover,
.obj_article_details .entry_details .item.galleys .obj_galley_link.html:hover {
  background: var(--bg-alt); border-color: var(--accent); color: var(--accent-dk);
}
.obj_article_details .entry_details .item.galleys ul { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   HOMEPAGE BANDS
   Full-width alternating sections, in the manner of the JTL homepage. The
   index page drops the usual content card so the bands can run edge to edge.
   ========================================================================== */

.pkp_structure_page { overflow-x: hidden; }

.pkp_page_index .pkp_structure_content { padding-top: 0; }
.pkp_page_index .pkp_structure_main {
  background: transparent; border: 0; box-shadow: none;
  padding: 0; max-width: none; animation: none;
}

/* superseded — see 'HOMEPAGE BANDS — corrected' below */
.skf-band-plain { background: var(--bg); }
.skf-band-alt   { background: var(--bg-alt); border-block: 1px solid var(--line); }

/* intro */
.skf-band-intro { padding: 2.4rem 0 2.2rem; }
.skf-intro-lead {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  line-height: 1.5; color: var(--ink); max-width: 60ch; margin: 0 0 1.2rem;
}
.skf-intro-facts { display: flex; gap: 2rem; flex-wrap: wrap; font-size: .92rem; color: var(--muted); }
.skf-intro-facts strong { color: var(--accent); font-weight: 700; }

/* the hero no longer needs its own card padding */
.skf-hero { margin: 0; }
.skf-hero .skf-hero-grid { gap: 2.2rem; }
.skf-hero-title { margin-top: 0; }
.skf-hero-title a { color: var(--ink); }
.skf-cats, .skf-prev { margin: 0; padding-top: 3rem; border-top: 0; }

/* previous issues row */
.skf-prev-row { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.skf-prev-item { display: block; width: 150px; text-decoration: none; }
.skf-cover-sm { aspect-ratio: 3/4; padding: .85rem; }
.skf-cover-sm .skf-cover-top { font-size: .6rem; letter-spacing: .1em; }
.skf-cover-sm .skf-cover-om { font-size: 1.8rem; }
.skf-cover-ghost { background: var(--bg-alt) !important; border: 1px dashed var(--line); }
.skf-cover-ghost .skf-cover-top, .skf-cover-ghost .skf-cover-om { color: var(--muted) !important; }
.skf-cover-ghost::before { display: none; }
.skf-prev-label {
  display: block; margin-top: .6rem; font-size: .85rem;
  font-weight: 600; color: var(--ink); line-height: 1.4;
}
.skf-prev-item:hover .skf-prev-label { color: var(--accent); }
.skf-prev-next .skf-prev-label { color: var(--muted); font-weight: 400; }

/* CFP band spans full width; the inner panel keeps its gradient */
.skf-cfp-band { padding: 0; }
.skf-cfp-band .skf-band-in { padding: 0; max-width: none; }
.skf-cfp-band .skf-cfp { border-radius: 0; padding: 3rem 1.4rem; }
.skf-cfp-band .skf-cfp > * { max-width: 1160px; margin-inline: auto; }

@media (max-width: 767px) {
  .skf-band { padding: 2rem 0; }
  .skf-band-in { padding: 0 1.1rem; }
  .skf-cats, .skf-prev { padding-top: 2rem; }
  .skf-intro-lead { font-size: 1.08rem; }
  .skf-intro-facts { gap: .9rem 1.4rem; font-size: .88rem; }
  .skf-prev-item { width: 120px; }
  .skf-cfp-band .skf-cfp { padding: 2rem 1.1rem; }
}

/* ==========================================================================
   HOMEPAGE BANDS — corrected
   The previous approach full-bled each band with width:100vw and a negative
   margin. Because the parent pins .pkp_structure_content to a fixed 1160px,
   that maths drifted, and 100vw included the scrollbar — which produced both
   the misalignment and the horizontal scroll. Instead, let the index page's
   containers run full width and give each band a normal centred inner box.
   ========================================================================== */

.pkp_page_index .pkp_structure_content,
.pkp_page_index .pkp_structure_main {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pkp_page_index .pkp_structure_content { padding-top: 0 !important; }
.pkp_page_index .pkp_structure_main {
  background: transparent; border: 0; box-shadow: none;
  padding-top: 0; padding-bottom: 0; animation: none;
}

.skf-band {
  width: 100%;
  margin-left: 0;
  padding: 3rem 0;
}
.skf-band-in {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.4rem;
  box-sizing: border-box;
}

/* nothing on the site may cause sideways scrolling */
html, body { max-width: 100%; overflow-x: hidden; }
.pkp_structure_page { overflow-x: clip; }

.skf-cfp-band { padding: 0; }
.skf-cfp-band .skf-band-in { max-width: none; padding: 0; }
.skf-cfp-band .skf-cfp { border-radius: 0; padding: 3rem 1.4rem; }
.skf-cfp-band .skf-cfp > * { max-width: 1160px; margin-inline: auto; }

/* ==========================================================================
   MASTHEAD — tighter, now that the account links have moved to the top strip
   ========================================================================== */

.pkp_site_name_wrapper { padding: 1.1rem 0 1.05rem !important; }
.pkp_head_wrapper { padding-top: 0 !important; }
.has_site_logo .pkp_head_wrapper { padding-top: 0 !important; }
.pkp_site_name img, .pkp_site_name .is_img img { height: 72px; width: 72px; }
.skf-mast-sub { margin-top: .12rem; }

/* top strip: actions hard right */
.skf-topbar-in { flex-wrap: nowrap; }
.skf-topbar-note { flex: 1 1 auto; text-align: left; }
.skf-topbar-actions { margin-left: auto; }

/* ==========================================================================
   NAVIGATION — remove every inherited PKP blue
   ========================================================================== */

.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a:active {
  background: transparent !important;
  color: var(--accent) !important;
  outline: 0;
}
.pkp_nav_list ul a,
.pkp_navigation_primary ul a,
.pkp_navigation_primary .dropdown-menu a {
  color: var(--body) !important;
  border-left: 0 !important;
  border-color: transparent !important;
}
.pkp_nav_list ul a:hover, .pkp_nav_list ul a:focus,
.pkp_navigation_primary ul a:hover, .pkp_navigation_primary ul a:focus,
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
  background: var(--bg-alt) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
  outline: 0;
}

@media (max-width: 767px) {
  /* the mobile panel was showing the inherited blue left rule */
  .skf-navbar .pkp_navigation_primary a,
  .skf-navbar .pkp_navigation_primary > li > a,
  .skf-navbar .pkp_navigation_primary > li > ul > li > a {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
  .skf-navbar .pkp_navigation_primary > li > a { border-bottom: 1px solid var(--line-soft) !important; }
  .skf-navbar .pkp_navigation_primary > li > ul > li > a { border-bottom: 0 !important; }
  .skf-navbar .pkp_navigation_primary a:focus,
  .skf-navbar .pkp_navigation_primary a:active {
    background: var(--bg-alt) !important; color: var(--accent) !important;
  }
  .skf-topbar-in { flex-wrap: wrap; justify-content: center; }
  .skf-topbar-actions { margin-left: 0; }
  .pkp_site_name img, .pkp_site_name .is_img img { height: 52px; width: 52px; }
}

/* ==========================================================================
   TOP STRIP — corrected
   The tagline was allowed to shrink and wrap onto six lines, which stretched
   the row and turned the pill into a circle. Pin each part's sizing instead:
   badge and actions never shrink, the note takes the slack on one line and
   truncates if the window is genuinely too narrow.
   ========================================================================== */

.skf-topbar { line-height: 1.5; }

.skf-topbar-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: .45rem 1.4rem;
  box-sizing: border-box;
  min-height: 34px;
}

.skf-oa {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  padding: .12rem .7rem;
  border-radius: 999px;
  line-height: 1.55;
  font-size: .78rem;
}

.skf-topbar-note {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .8rem;
}

.skf-topbar-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
}

.skf-top-submit {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.55;
  padding: .14rem .8rem;
}

/* the account links must sit in the strip, not float in the masthead */
.skf-topbar .pkp_navigation_user_wrapper {
  position: static !important;
  top: auto !important; right: auto !important;
  display: block !important;
  margin: 0; padding: 0;
}
.skf-topbar .pkp_navigation_user {
  display: flex; align-items: center; gap: .15rem;
  margin: 0; padding: 0; list-style: none; white-space: nowrap;
}
.skf-topbar .pkp_navigation_user > li { margin: 0; }
.skf-topbar .pkp_navigation_user > li > a {
  display: block; padding: .1rem .5rem; font-size: .8rem; line-height: 1.55;
  color: #F3D9BE !important; white-space: nowrap;
}
.skf-topbar .pkp_navigation_user > li > a:hover {
  color: var(--gold-bright) !important; text-decoration: none;
}
/* dropdowns from the user menu, once signed in */
.skf-topbar .pkp_navigation_user ul {
  position: absolute; right: 1.4rem; top: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-lift); padding: .3rem 0; min-width: 190px; z-index: 500;
}
.skf-topbar .pkp_navigation_user > li:not(:hover):not(:focus-within) ul { display: none; }
.skf-topbar .pkp_navigation_user ul a { color: var(--body) !important; padding: .5rem 1rem !important; }
.skf-topbar .pkp_navigation_user ul a:hover { background: var(--bg-alt); color: var(--accent) !important; }

@media (max-width: 860px) {
  .skf-topbar-note { display: none; }
  .skf-topbar-in { justify-content: space-between; gap: .6rem; }
}
@media (max-width: 520px) {
  .skf-topbar-in { flex-wrap: wrap; justify-content: center; padding: .4rem 1rem; }
  .skf-oa { order: 1; }
  .skf-topbar-actions { order: 2; margin-left: 0; }
}

/* ==========================================================================
   GALLEY VIEWERS — PDF.js and the HTML reader
   These plugin templates render a bare page with a slim bar. Brand that bar,
   fix the inherited blue title, and pair it with the footer injected through
   Templates::Common::Footer::PageFooter.
   ========================================================================== */

/* superseded by the light galley bar further down. The old selector list
   included `body.pkp_op_view .header_view` (0,2,1), which outranked the later
   plain `.header_view` (0,1,0) — and because both carried !important, source
   order never applied. The background declaration is removed here. */
body.pkp_op_view .header_view,
.header_view {
  border-bottom: none !important;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.4rem !important;
  min-height: 62px;
  position: relative;
}

/* the journal seal, so the reading view still says whose journal this is */
.header_view::before {
  content: "";
  flex: 0 0 auto;
  width: 40px; height: 40px;
  background-image: url("/public/journals/1/skf_logo.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

.header_view .title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--serif) !important;
  font-size: 1.02rem !important;
  font-weight: 600;
  line-height: 1.35;
  color: #fff !important;              /* was PKP blue */
  text-decoration: none !important;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.header_view .title:hover { color: var(--gold-bright) !important; }

.header_view .return {
  flex: 0 0 auto; order: -1;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  position: relative;
  transition: background .2s var(--ease);
}
.header_view .return:hover { background: rgba(255,255,255,.26); }
/* the parent already supplies the arrow through .header_view .return:before;
   adding another produced a doubled icon once FontAwesome started loading */
.header_view .return::after { content: none !important; }
.header_view .return:before {
  position: absolute; inset: 0;
  display: flex !important; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
}

.header_view .download {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--gold-bright); color: var(--warm-3) !important;
  border-radius: 8px; padding: .4rem .95rem;
  font-size: .85rem; font-weight: 700; text-decoration: none !important;
  transition: background .2s var(--ease), transform .16s var(--ease);
}
.header_view .download:hover { background: #FFF35C; transform: translateY(-1px); }
/* likewise, .header_view .download:before is the parent's own glyph */
.header_view .download .label::before { content: none !important; }
.header_view .download:before { margin-right: .4rem; color: inherit; }

/* the viewer itself should fill the window between bar and footer */
.galley_view, #pdfCanvasContainer, #htmlContainer {
  height: calc(100vh - 62px - 46px);
  min-height: 480px;
  border: 0; background: var(--bg-alt);
}
.galley_view iframe, #pdfCanvasContainer iframe, #htmlContainer iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* footer injected by the theme's PageFooter hook */
.skf-galley-footer {
  background: var(--warm-3); color: #E8C9A8;
  font-size: .82rem; height: 46px; display: flex; align-items: center;
}
.skf-galley-footer-in {
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.skf-galley-footer a { color: #E8C9A8; text-decoration: none; }
.skf-galley-footer a:hover { color: var(--gold-bright); }
.skf-gf-name a { font-family: var(--serif); font-size: .92rem; color: #fff; }

@media (max-width: 640px) {
  .header_view { padding: .6rem 1rem !important; gap: .7rem; min-height: 56px; }
  .header_view::before { width: 32px; height: 32px; }
  .header_view .title { font-size: .92rem !important; -webkit-line-clamp: 2; }
  .header_view .download { padding: .35rem .7rem; font-size: .8rem; }
  .galley_view, #pdfCanvasContainer, #htmlContainer { height: calc(100vh - 56px - 60px); }
  .skf-galley-footer { height: auto; padding: .6rem 0; }
  .skf-galley-footer-in { justify-content: center; text-align: center; font-size: .78rem; }
}

/* ==========================================================================
   NAVIGATION — settle smoothly instead of snapping in
   With eight top-level items the bar visibly reflowed as the page painted.
   Reserve its height, then fade the row in once so nothing jumps.
   ========================================================================== */

.pkp_navigation_primary_row { min-height: 53px; }
.pkp_navigation_primary_wrapper { min-height: 53px; }

@keyframes skf-nav-settle {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.skf-navbar .pkp_navigation_primary {
  animation: skf-nav-settle .34s var(--ease) both;
  animation-delay: .04s;
}

/* each item eases its own colour/underline, so hover never snaps either */
.pkp_navigation_primary > li > a {
  transition: color .2s var(--ease), background .2s var(--ease);
}

/* the masthead lockup arrives with the same gentle fade */
@keyframes skf-mast-settle { from { opacity: 0; } to { opacity: 1; } }
.skf-mast-text, .skf-mast-meta, .skf-topbar-in {
  animation: skf-mast-settle .3s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .skf-navbar .pkp_navigation_primary,
  .skf-mast-text, .skf-mast-meta, .skf-topbar-in { animation: none !important; }
}

/* mobile: the panel already animates open, so don't double up */
@media (max-width: 767px) {
  .skf-navbar .pkp_navigation_primary { animation: none; }
  .pkp_navigation_primary_row, .pkp_navigation_primary_wrapper { min-height: 0; }
}

/* ==========================================================================
   MASTHEAD SEAL — larger within the same header height
   The bar was 72px of logo plus ~1.1rem padding top and bottom. Trading most
   of that padding for logo gives a noticeably bigger seal while the overall
   header height stays where it was.
   ========================================================================== */

.pkp_site_name_wrapper { padding: .5rem 0 .45rem !important; }
.pkp_site_name img,
.pkp_site_name .is_img img {
  height: 96px !important;
  width: 96px !important;
  max-height: none !important;
}

@media (max-width: 767px) {
  .pkp_site_name_wrapper { padding: .45rem 0 .4rem !important; }
  .pkp_site_name img, .pkp_site_name .is_img img {
    height: 68px !important; width: 68px !important;
  }
}
@media (max-width: 430px) {
  .pkp_site_name_wrapper { padding: .4rem 0 .35rem !important; gap: .5rem; }
  .pkp_site_name img, .pkp_site_name .is_img img {
    height: 58px !important; width: 58px !important;
  }
}

/* Match the previous header height precisely. Before, the title/tagline block
   (~87px) was the tallest item and set the bar height at ~121px. The 96px seal
   is now the tallest, so restore padding to land on the same total. */
.pkp_site_name_wrapper { padding: .78rem 0 .75rem !important; }
@media (max-width: 767px) { .pkp_site_name_wrapper { padding: .6rem 0 .55rem !important; } }
@media (max-width: 430px)  { .pkp_site_name_wrapper { padding: .5rem 0 .45rem !important; } }

/* ==========================================================================
   STACKING — the dropdown was painting behind the page content
   .pkp_structure_main runs a fade animation, and an animated element forms
   its own stacking context. Because the content block comes after the header
   in the document, it was winning regardless of the submenu's z-index.
   Give the header chain an explicit, higher layer.
   ========================================================================== */

.pkp_structure_head { position: relative; z-index: 200; }
.skf-navbar { position: relative; z-index: 210; }
.pkp_navigation_primary_row { position: relative; z-index: 210; }
.pkp_navigation_primary_wrapper { position: relative; z-index: 210; }
.pkp_navigation_primary > li.skf-has-sub { z-index: 220; }
.pkp_navigation_primary > li.skf-has-sub > ul,
.pkp_navigation_primary > li.skf-has-sub > ul.dropdown-menu { z-index: 999 !important; }
.skf-topbar { position: relative; z-index: 220; }

/* content sits below the header chrome */
.pkp_structure_content { position: relative; z-index: 1; }
.pkp_structure_main { position: relative; z-index: 1; }

/* ==========================================================================
   MOTION — slower, so things settle rather than snap
   ========================================================================== */

@keyframes skf-fade-up { from { opacity: 0; } to { opacity: 1; } }
.pkp_structure_main { animation: skf-fade-up .55s var(--ease) both; }

.skf-navbar .pkp_navigation_primary {
  animation: skf-nav-settle .6s var(--ease) both;
  animation-delay: .08s;
}
.skf-mast-text, .skf-mast-meta, .skf-topbar-in {
  animation: skf-mast-settle .55s var(--ease) both;
}
.skf-mast-text { animation-delay: .05s; }
.skf-mast-meta { animation-delay: .12s; }

/* scroll reveal: longer travel and a softer curve */
.skf-reveal { opacity: 0; transform: translateY(18px); }
.skf-reveal.skf-in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}

/* mobile menu opens more gently too */
@media (max-width: 767px) {
  .skf-navbar {
    transition: max-height .5s var(--ease), opacity .38s var(--ease);
  }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li {
    animation: skf-nav-in .42s var(--ease) both;
  }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(1) { animation-delay: .04s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(2) { animation-delay: .09s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(3) { animation-delay: .14s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(4) { animation-delay: .19s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(5) { animation-delay: .24s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(6) { animation-delay: .29s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(7) { animation-delay: .34s; }
  .skf-navbar.pkp_site_nav_menu--isOpen .pkp_navigation_primary > li:nth-child(8) { animation-delay: .39s; }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_structure_main, .skf-navbar .pkp_navigation_primary,
  .skf-mast-text, .skf-mast-meta, .skf-topbar-in { animation: none !important; }
  .skf-reveal, .skf-reveal.skf-in { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   FOOTER — it was running flush to the screen edge on mobile
   The parent zeroes the footer's side padding at its fixed-width breakpoints,
   which left no gutter once the layout dropped to a single column.
   ========================================================================== */

.pkp_structure_footer_wrapper { width: 100%; }
.pkp_structure_footer {
  width: 100% !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding-left: 1.4rem !important;
  padding-right: 1.4rem !important;
  box-sizing: border-box;
}
.skf-foot-grid, .skf-foot-legal { padding-left: 0; padding-right: 0; }

@media (max-width: 767px) {
  .pkp_structure_footer {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    padding-top: 1.8rem !important;
  }
  .skf-foot-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }
  .skf-foot-col h4 { margin-bottom: .55rem; }
  .skf-foot-col a { padding: .3rem 0; }
  .skf-foot-legal { flex-direction: column; gap: .4rem; padding-top: 1rem; }
}
@media (max-width: 480px) {
  .pkp_structure_footer { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
  .skf-foot-grid { grid-template-columns: 1fr; gap: 1.3rem; }
}

/* the galley footer needs the same gutter */
.skf-galley-footer-in { padding-left: 1.2rem; padding-right: 1.2rem; box-sizing: border-box; }

/* ==========================================================================
   TOP STRIP — neutralise the parent's fixed width on the account list
   The default theme includes .pkp_navigation_user in its 728/952/1160px width
   rule and then adds `margin: 1rem auto 0; padding-top: 1rem; border-top`.
   Inside the top strip that produced a 1160px-wide block which sat over the
   Submit button — only its outer edge stayed clickable — and pushed the
   Register/Login links out of view on desktop.
   ========================================================================== */

.skf-topbar .pkp_navigation_user,
.skf-topbar .pkp_navigation_user.pkp_navigation_user {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center;
  gap: .1rem;
  list-style: none;
}
.skf-topbar .pkp_navigation_user::before,
.skf-topbar .pkp_navigation_user::after { content: none !important; display: none !important; }

.skf-topbar .pkp_navigation_user_wrapper {
  width: auto !important;
  max-width: none !important;
  position: static !important;
  margin: 0 !important; padding: 0 !important;
  display: block !important;
}
.skf-topbar .pkp_navigation_user > li {
  margin: 0 !important; padding: 0 !important; float: none !important; list-style: none;
}

/* the button must be clickable across its whole area */
.skf-top-submit {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.skf-topbar-actions { position: relative; z-index: 2; }

/* ==========================================================================
   LOGIN / REGISTER — taller, calmer fields matching the portal
   ========================================================================== */

.page_login .pkp_structure_main,
.page_register .pkp_structure_main { max-width: 640px; margin-inline: auto; }

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form select,
.cmp_form textarea {
  width: 100%;
  max-width: none !important;      /* parent caps these at 20em */
  min-height: 50px;
  padding: .85rem 1rem;
  font-size: 1rem;
  line-height: 1.45;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cmp_form textarea { min-height: 130px; padding-top: .8rem; }
.cmp_form select { min-height: 50px; padding-right: 2.4rem; }

.cmp_form input:hover, .cmp_form select:hover, .cmp_form textarea:hover {
  border-color: #CFC7BC;
}
.cmp_form input:focus, .cmp_form select:focus, .cmp_form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184,65,15,.14);
  outline: none;
}

.cmp_form label, .cmp_form .label {
  font-size: .85rem; font-weight: 650; color: var(--ink);
  margin-bottom: .42rem; display: block;
}
.cmp_form .fields > div { margin-bottom: 1.05rem; }

.cmp_form .buttons {
  margin-top: 1.7rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.cmp_form .buttons button,
.cmp_form .buttons input[type="submit"] {
  min-height: 50px; padding: .8rem 1.9rem; font-size: 1rem; border-radius: 8px;
}

/* consent rows keep pace with the taller fields */
.cmp_form .optin, .cmp_form .consent {
  padding: 1rem 1.1rem; border-radius: 8px; margin-bottom: .9rem;
}
.cmp_form .optin input[type="checkbox"],
.cmp_form .consent input[type="checkbox"] { width: 19px; height: 19px; }

@media (max-width: 600px) {
  .cmp_form input[type="text"], .cmp_form input[type="email"],
  .cmp_form input[type="password"], .cmp_form select, .cmp_form textarea {
    font-size: 16px;               /* stops iOS zooming on focus */
    min-height: 48px; padding: .8rem .9rem;
  }
}

/* ==========================================================================
   TOP STRIP — tagline removed
   The "Peer-reviewed · Bi-annual · Siddhanta Knowledge Foundation" line was
   the only flexible item in the row, so it absorbed every layout problem and
   broke the strip. It is gone from the markup; the badge now holds the left
   and the actions hold the right, with nothing in between to squeeze.
   ========================================================================== */

.skf-topbar-note { display: none !important; }

.skf-topbar-in {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
}
.skf-oa { flex: 0 0 auto; margin-right: auto; }
.skf-topbar-actions { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 520px) {
  .skf-topbar-in { flex-wrap: nowrap; justify-content: space-between; padding: .4rem 1rem; }
  .skf-oa { order: 0; margin-right: 0; font-size: .74rem; padding: .1rem .55rem; }
  .skf-topbar-actions { order: 1; margin-left: 0; gap: .4rem; }
  .skf-top-submit { font-size: .74rem; padding: .12rem .6rem; }
  .skf-topbar .pkp_navigation_user > li > a { font-size: .74rem; padding: .1rem .35rem; }
}

/* ==========================================================================
   TOP STRIP — final reset of the account block
   The parent centres it with
     position:absolute; top:0; left:50%; transform:translateX(-50%)
   Setting `position: static` alone was not enough: a transform still applies
   to a static element, so translateX(-50%) kept sliding the links half their
   own width to the left, on top of the Submit button. Clear the transform and
   every offset alongside it.
   ========================================================================== */

.skf-topbar .pkp_navigation_user_wrapper,
.skf-topbar #navigationUserWrapper {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  translate: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  text-align: right !important;
  border: 0 !important;
  float: none !important;
  display: block !important;
  z-index: auto !important;
}

/* the actions row lays its two children out side by side, nothing overlapping */
.skf-topbar-actions {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
  z-index: 3;
}
.skf-topbar-actions > * { position: static; transform: none; flex: 0 0 auto; }

.skf-topbar .pkp_navigation_user {
  position: static !important;
  transform: none !important;
  float: none !important;
  display: flex !important;
  align-items: center;
  gap: .1rem;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ==========================================================================
   TWO-COLUMN LAYOUT — content with a right sidebar
   The parent floats the sidebar; a grid is steadier and keeps the columns
   from collapsing into one another on intermediate widths.
   ========================================================================== */

.pkp_structure_content.has_sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: start;
}
.pkp_structure_content.has_sidebar .pkp_structure_main {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  min-width: 0;
}
.pkp_structure_sidebar {
  float: none !important;
  width: auto !important;
  min-width: 0;
  position: sticky;
  top: 1.5rem;
}

/* the homepage keeps its full-width bands — a sidebar there would cut them */
.pkp_page_index .pkp_structure_content.has_sidebar { display: block; }
.pkp_page_index .pkp_structure_sidebar { display: none; }

/* ---- block styling ---- */
.pkp_block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.2rem 1.3rem !important;
  margin-bottom: 1rem;
  font-size: .95rem;
  line-height: 1.6;
  box-shadow: var(--sh);
}
.pkp_block .title {
  font-family: var(--sans) !important;
  font-size: .74rem !important;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 .8rem !important;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.pkp_block .content ul { list-style: none; margin: 0; padding: 0; }
.pkp_block .content ul li {
  padding: 0 !important;
  border-bottom: 1px solid var(--line-soft);
}
.pkp_block .content ul li:last-child { border-bottom: 0; }
.pkp_block .content ul li a {
  display: block;
  padding: .55rem 0;
  font-size: .93rem;
  color: var(--body);
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}
.pkp_block .content ul li a:hover {
  color: var(--accent); padding-left: .3rem; text-decoration: none;
}

/* "Make a Submission" reads as the call to action it is */
.pkp_block.block_make_submission { background: var(--bg-alt); border-color: var(--o200); }
.pkp_block.block_make_submission .content a,
.block_make_submission a {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff !important;
  padding: .7rem 1rem; border-radius: 8px;
  font-weight: 650; font-size: .95rem; text-align: center;
  transition: background .2s var(--ease), transform .16s var(--ease);
}
.pkp_block.block_make_submission .content a:hover,
.block_make_submission a:hover {
  background: var(--accent-dk); color: #fff !important;
  transform: translateY(-1px); padding-left: 1rem; text-decoration: none;
}

@media (max-width: 991px) {
  .pkp_structure_content.has_sidebar { grid-template-columns: 1fr; gap: 1.4rem; }
  .pkp_structure_sidebar { position: static; }
  .pkp_block { padding: 1rem 1.1rem !important; }
}

/* ==========================================================================
   TWO-COLUMN LAYOUT — explicit placement
   Auto-placement was landing the content in the wrong track, because the
   parent still carries `float:left; width:860px` on the main column and
   `float:right; width:300px` on the sidebar. Pin both to a named cell and
   clear the inherited sizing outright, so nothing is left to interpretation.
   ========================================================================== */

.pkp_structure_content.has_sidebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  grid-template-areas: "skfmain skfside" !important;
  gap: 2rem !important;
  align-items: start;
  width: 100%;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.pkp_structure_content.has_sidebar > .pkp_structure_main {
  grid-area: skfmain !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
  grid-area: skfside !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* the parent's clearfix pseudo-elements confuse grid placement */
.pkp_structure_content.has_sidebar::before,
.pkp_structure_content.has_sidebar::after { content: none !important; display: none !important; }

/* single column below the breakpoint */
@media (max-width: 991px) {
  .pkp_structure_content.has_sidebar {
    grid-template-columns: 1fr !important;
    grid-template-areas: "skfmain" "skfside" !important;
    gap: 1.4rem !important;
  }
  .pkp_structure_content.has_sidebar > .pkp_structure_sidebar { position: static; }
}

/* homepage keeps its full-width bands and no sidebar */
.pkp_page_index .pkp_structure_content.has_sidebar {
  display: block !important;
  max-width: none !important;
  gap: 0 !important;
}
.pkp_page_index .pkp_structure_sidebar { display: none !important; }

/* year line on the small issue tiles */
.skf-cover-sm { justify-content: space-between; }
.skf-cover-year {
  font-size: .68rem; letter-spacing: .12em; color: #F0CFAE;
  border-top: 1px solid rgba(255,255,255,.22); padding-top: .45rem;
}
.skf-prev-row { gap: 1.4rem; }
.skf-prev-item { transition: transform .28s var(--ease); }
.skf-prev-item:hover { transform: translateY(-4px); }
@media (max-width: 767px) { .skf-prev-row { gap: 1rem; } .skf-prev-item { width: 118px; } }

/* ==========================================================================
   SIDDHANTA BRAND PALETTE
   Applied from the approved brand sheet, following its 60–25–10–5 balance:
   neutrals carry the page, warm golds carry the furniture, browns carry the
   text, accents are used sparingly.

   One deliberate deviation. The sheet's link colour #D48A2E measures 2.76:1
   on the card surface and its hover #C89B3C measures 2.52:1 — both well under
   the 4.5:1 needed for readable body text. Inline links therefore use
   #A85F1E, the same Temple Bronze darkened until it clears AA at 4.78:1.
   #D48A2E itself is kept everywhere it works: buttons, borders, icons,
   rules and large display type.
   ========================================================================== */

:root {
  /* ---- palette, verbatim ---- */
  --skf-heritage-gold:   #C89B3C;
  --skf-temple-bronze:   #D48A2E;
  --skf-ancient-sand:    #F6E8C9;
  --skf-palm-cream:      #FCF8F1;
  --skf-manuscript:      #8A5A2E;
  --skf-natural-clay:    #A78B6A;
  --skf-lotus-green:     #5C7C52;
  --skf-copper:          #E07A2D;
  --skf-vermillion:      #D84E2A;
  --skf-indigo:          #446A9C;
  --skf-stone-grey:      #CBBBA1;

  /* ---- surfaces (60%) ---- */
  --bg:        #FFFDF8;   /* cards / surface */
  --bg-alt:    #FCF8F1;   /* main background */
  --band-alt:  #F7E9CB;   /* alternate section band */
  --bg-deep:   #4B3D2A;   /* footer */

  /* ---- ink (10%) ---- */
  --ink:       #4B3D2A;   /* heading */
  --body:      #6A5C48;   /* body text */
  --muted:     #8F816D;   /* light text */
  --line:      #E7D9BE;   /* borders */
  --line-soft: #F0E4CC;   /* hairlines */
  --divider:   #D8C6A6;

  /* ---- warm golds (25%) + accents (5%) ---- */
  --accent:      #A85F1E;   /* readable link — darkened Temple Bronze */
  --accent-dk:   #8A4A15;
  --accent-soft: #F4E5BF;   /* secondary button hover */
  --gold:        #C89B3C;   /* Heritage Gold */
  --gold-dk:     #B2872C;   /* primary button hover */
  --gold-bright: #E7C46A;   /* on dark grounds */
  --bronze:      #D48A2E;   /* Temple Bronze — buttons, rules, icons */

  /* masthead / cover / CFP grounds */
  --warm-1: #A86B33;
  --warm-2: #8A5A2E;
  --warm-3: #5E3D1F;

  --sh:      0 1px 2px rgba(75,61,42,.05), 0 10px 30px -18px rgba(75,61,42,.22);
  --sh-lift: 0 2px 8px rgba(75,61,42,.08), 0 22px 48px -22px rgba(75,61,42,.30);
}

/* ---- page + surfaces ------------------------------------------------- */
html, body, .pkp_structure_page, .pkp_structure_content { background: var(--bg-alt); }
.pkp_structure_main, .pkp_block { background: var(--bg); border-color: var(--line); }

/* ---- masthead: Manuscript Brown, 5.9:1 for white ---------------------- */
.pkp_structure_head {
  background: linear-gradient(158deg, var(--warm-1) 0%, var(--warm-2) 58%, var(--warm-3) 100%);
}
.pkp_structure_head::after {
  background: radial-gradient(760px 320px at 88% -25%, rgba(231,196,106,.22), transparent 60%);
}
.skf-mast-deva { color: var(--gold-bright); }
.skf-mast-sub  { color: #EDD9BC; }
.skf-issn      { color: var(--gold-bright); }

/* ---- top strip -------------------------------------------------------- */
.skf-topbar { background: #45301A; color: #EDD9BC; }
.skf-oa {
  color: var(--gold-bright);
  background: rgba(231,196,106,.13);
  border-color: rgba(231,196,106,.34);
}
.skf-top-submit {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  color: #fff !important;
}
.skf-top-submit:hover {
  background: var(--gold); border-color: var(--gold); color: #3A2E1E !important;
}
.skf-topbar .pkp_navigation_user > li > a { color: #EDD9BC !important; }
.skf-topbar .pkp_navigation_user > li > a:hover { color: var(--gold-bright) !important; }

/* ---- navigation ------------------------------------------------------- */
.pkp_navigation_primary_row { background: var(--bg); border-bottom-color: var(--line); }
.pkp_navigation_primary > li > a { color: var(--body); }
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a { color: var(--accent) !important; }
.pkp_navigation_primary > li > a::after { background: var(--bronze); }
.pkp_navigation_primary > li.skf-has-sub > ul { background: var(--bg); border-color: var(--line); }

/* Submissions button in the bar — Heritage Gold per the CTA spec */
.pkp_navigation_primary > li > a[href$="/submission"],
.pkp_navigation_primary > li > a[href$="/submission"]:hover,
.pkp_navigation_primary > li > a[href$="/submission"]:focus {
  background: var(--gold) !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(200,155,60,.32);
}
.pkp_navigation_primary > li > a[href$="/submission"]:hover { background: var(--gold-dk) !important; }

/* ---- links + buttons -------------------------------------------------- */
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-dk); }

.cmp_button, .pkp_button, button.submit, input[type="submit"], .skf-btn-solid {
  background: var(--gold); color: #fff; border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(200,155,60,.28);
}
.cmp_button:hover, .pkp_button:hover, button.submit:hover,
input[type="submit"]:hover, .skf-btn-solid:hover {
  background: var(--gold-dk); border-color: var(--gold-dk); color: #fff;
}
.skf-btn-outline, .skf-btn-ghost {
  background: transparent; color: var(--bronze); border-color: var(--bronze);
}
.skf-btn-outline:hover, .skf-btn-ghost:hover {
  background: var(--accent-soft); border-color: var(--bronze); color: var(--accent-dk);
}

/* ---- issue cover + CFP: Bronze gradient from the sheet ---------------- */
.skf-cover {
  background: linear-gradient(155deg, var(--skf-copper) 0%, var(--bronze) 55%, #A8641F 100%);
}
.skf-cover::before {
  background: radial-gradient(240px 160px at 82% 8%, rgba(255,240,200,.28), transparent 68%);
}
.skf-cover-top, .skf-cover-om { color: #FFF3D6; }
.skf-cover-bot, .skf-cover-year { color: #F6E3C4; border-top-color: rgba(255,255,255,.24); }

.skf-cfp { background: linear-gradient(135deg, var(--warm-1) 0%, var(--warm-3) 100%); }
.skf-cfp::before {
  background: radial-gradient(560px 240px at 12% 118%, rgba(231,196,106,.20), transparent 66%);
}
.skf-cfp-text { color: #EDD9BC; }
.skf-cfp .skf-btn-gold { background: var(--gold); color: #3A2E1E; }
.skf-cfp .skf-btn-gold:hover { background: var(--gold-bright); color: #3A2E1E; }

/* ---- bands, cards, article rows -------------------------------------- */
.skf-band-plain { background: var(--bg); }
.skf-band-alt   { background: var(--band-alt); border-color: var(--divider); }
.skf-cat { background: var(--bg-alt); border-color: var(--line); }
.skf-cat:hover { background: var(--bg); }
.skf-cat::before { background: var(--bronze); }
.skf-eyebrow { color: var(--accent); }
.skf-eyebrow-gold { color: var(--gold-bright); }
.sections .section > h3 { color: var(--muted); border-bottom-color: var(--line); }
.obj_article_summary > h4.title > a { color: var(--ink); }
.obj_article_summary:hover > h4.title > a { color: var(--accent); }
.obj_galley_link { background: var(--bg-alt); color: var(--accent); border-color: var(--line); }
.obj_galley_link:hover { background: var(--bronze); color: #fff; border-color: var(--bronze); }

/* ---- forms ------------------------------------------------------------ */
.cmp_form input, .cmp_form select, .cmp_form textarea {
  background: var(--bg); border-color: var(--line); color: var(--ink);
}
.cmp_form input:focus, .cmp_form select:focus, .cmp_form textarea:focus {
  border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(212,138,46,.16);
}
.cmp_form .optin, .cmp_form .consent { background: var(--bg-alt); border-color: var(--line); }

/* ---- sidebar ---------------------------------------------------------- */
.pkp_block .title { color: var(--muted); border-bottom-color: var(--line); }
.pkp_block .content ul li { border-bottom-color: var(--line-soft); }
.pkp_block .content ul li a { color: var(--body); }
.pkp_block .content ul li a:hover { color: var(--accent); }
.pkp_block.block_make_submission { background: var(--accent-soft); border-color: var(--gold); }
.pkp_block.block_make_submission .content a, .block_make_submission a {
  background: var(--gold); color: #fff !important;
}
.pkp_block.block_make_submission .content a:hover, .block_make_submission a:hover {
  background: var(--gold-dk); color: #fff !important;
}

/* ---- footer: Heading Brown ------------------------------------------- */
.pkp_structure_footer_wrapper { background: var(--bg-deep); color: #D9C9AE; }
.pkp_structure_footer a { color: #D9C9AE; }
.pkp_structure_footer a:hover { color: var(--gold-bright); }
.pkp_structure_footer .skf-issn { color: #BFAE93; }
.skf-galley-footer { background: var(--bg-deep); color: #D9C9AE; }
.skf-galley-footer a { color: #D9C9AE; }
.skf-galley-footer a:hover { color: var(--gold-bright); }

/* ---- galley bar ------------------------------------------------------- */
/* brown galley bar superseded by the light one below */
.header_view .download { background: var(--gold); color: #3A2E1E !important; }
.header_view .download:hover { background: var(--gold-bright); color: #3A2E1E !important; }

/* ---- misc ------------------------------------------------------------- */
blockquote { background: var(--bg-alt); border-left-color: var(--bronze); }
::selection { background: var(--accent-soft); color: var(--ink); }
.submission_checklist li::before { color: var(--lotus, var(--skf-lotus-green)); }
.pkp_structure_main tbody tr:hover { background: var(--bg-alt); }

/* ==========================================================================
   PALETTE — two readability corrections
   1. The sheet specifies the primary button as Heritage Gold #C89B3C with
      #FFFFFF text. That measures 2.56:1 — unreadable. Heritage Gold is kept
      as the button colour; the label becomes deep brown, giving 5.16:1.
   2. The link bronze needed a shade more depth to clear AA on the Ancient
      Sand band as well as on white: #9E5819 gives 5.31:1 and 4.52:1.
   ========================================================================== */

:root {
  --accent:    #9E5819;
  --accent-dk: #834510;
  --on-gold:   #3A2E1E;
}

.cmp_button, .pkp_button, button.submit, input[type="submit"],
.skf-btn-solid, .cmp_form .buttons button, .cmp_form .buttons input[type="submit"] {
  background: var(--gold);
  color: var(--on-gold) !important;
  border-color: var(--gold);
  font-weight: 700;
}
.cmp_button:hover, .pkp_button:hover, button.submit:hover,
input[type="submit"]:hover, .skf-btn-solid:hover,
.cmp_form .buttons button:hover, .cmp_form .buttons input[type="submit"]:hover {
  background: var(--gold-dk); color: var(--on-gold) !important; border-color: var(--gold-dk);
}

.pkp_navigation_primary > li > a[href$="/submission"],
.pkp_navigation_primary > li > a[href$="/submission"]:hover,
.pkp_navigation_primary > li > a[href$="/submission"]:focus {
  color: var(--on-gold) !important;
  font-weight: 700;
}

.pkp_block.block_make_submission .content a, .block_make_submission a,
.pkp_block.block_make_submission .content a:hover, .block_make_submission a:hover {
  color: var(--on-gold) !important; font-weight: 700;
}

.skf-cfp .skf-btn-gold, .skf-cfp .skf-btn-gold:hover { color: var(--on-gold) !important; font-weight: 700; }
.header_view .download, .header_view .download:hover { color: var(--on-gold) !important; }
.skf-top-submit:hover { color: var(--on-gold) !important; }

/* ==========================================================================
   BRAND GRADIENTS — Heritage Gold and Ancient Paper
   Heritage Gold  #FFE7BA → #C89B3C
   Ancient Paper  #FFFDF8 → #F5E7C7

   A gradient has to pass contrast at its darkest stop, not its average.
   White on Heritage Gold is 1.21:1 at the light end — unusable. Deep brown
   #332818 holds 5.63:1 across the whole sweep, so that is the ink used on
   every gold surface.
   ========================================================================== */

:root {
  --grad-gold:       linear-gradient(135deg, #FFE7BA 0%, #EBCB86 45%, #C89B3C 100%);
  --grad-gold-deep:  linear-gradient(135deg, #F2D493 0%, #D9B45E 45%, #B2872C 100%);
  --grad-gold-v:     linear-gradient(180deg, #F4DCA2 0%, #C89B3C 100%);
  --grad-gold-v-hov: linear-gradient(180deg, #E9CE8B 0%, #B2872C 100%);
  --grad-paper:      linear-gradient(180deg, #FFFDF8 0%, #F5E7C7 100%);
  --grad-paper-soft: linear-gradient(180deg, #FFFDF8 0%, #FAF0DC 100%);
  --on-gold: #332818;
  --accent:  #965316;     /* clears AA on Ancient Paper as well as white */
}

/* ---- Ancient Paper: the alternating bands and quiet surfaces ---------- */
.skf-band-alt {
  background: var(--grad-paper) !important;
  border-top: 1px solid #EFE0C2;
  border-bottom: 1px solid #EFE0C2;
}
.skf-band-plain { background: #FFFDF8; }
.pkp_structure_content { background: var(--grad-paper-soft); background-attachment: fixed; }
.cmp_form .optin, .cmp_form .consent { background: var(--grad-paper-soft); }
.pkp_block { background: var(--grad-paper-soft); }
blockquote { background: var(--grad-paper); }

/* ---- Heritage Gold: issue covers ------------------------------------- */
.skf-cover {
  background: var(--grad-gold) !important;
  border: 1px solid rgba(120,85,25,.28);
  box-shadow: 0 2px 6px rgba(75,61,42,.10), 0 20px 40px -22px rgba(120,85,25,.5);
  color: var(--on-gold);
}
.skf-cover::before {
  background:
    radial-gradient(220px 150px at 78% 6%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(180px 140px at 12% 100%, rgba(138,90,46,.18), transparent 72%) !important;
}
.skf-cover-top  { color: var(--on-gold) !important; opacity: .82; }
.skf-cover-om   { color: #7A5216 !important; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.skf-cover-bot,
.skf-cover-year {
  color: var(--on-gold) !important; opacity: .78;
  border-top-color: rgba(120,85,25,.3) !important;
}
.skf-cover:hover { box-shadow: 0 4px 10px rgba(75,61,42,.12), 0 26px 52px -22px rgba(120,85,25,.55); }

/* ---- Heritage Gold: call for papers ---------------------------------- */
.skf-cfp {
  background: var(--grad-gold) !important;
  border-top: 1px solid rgba(120,85,25,.22);
  border-bottom: 1px solid rgba(120,85,25,.22);
  color: var(--on-gold);
}
.skf-cfp::before {
  background:
    radial-gradient(640px 300px at 88% -10%, rgba(255,255,255,.5), transparent 68%),
    radial-gradient(520px 260px at 8% 115%, rgba(138,90,46,.16), transparent 70%) !important;
}
.skf-cfp h2 { color: var(--on-gold) !important; }
.skf-cfp-text { color: #4A3A1E !important; }
.skf-cfp-text strong { color: var(--on-gold) !important; }
.skf-eyebrow-gold { color: #7A5216 !important; }

/* buttons on gold: solid brown reads best against it */
.skf-cfp .skf-btn-gold {
  background: #5E3D1F !important; color: #FFF3D6 !important;
  border: 1px solid #5E3D1F; box-shadow: 0 3px 12px rgba(94,61,31,.3);
}
.skf-cfp .skf-btn-gold:hover { background: #472E17 !important; color: #FFF3D6 !important; }
.skf-cfp .skf-btn-outline {
  background: rgba(255,255,255,.35) !important;
  border-color: rgba(94,61,31,.5) !important;
  color: #5E3D1F !important;
}
.skf-cfp .skf-btn-outline:hover { background: rgba(255,255,255,.6) !important; color: #472E17 !important; }

/* ---- Heritage Gold: buttons ------------------------------------------ */
.cmp_button, .pkp_button, button.submit, input[type="submit"],
.skf-btn-solid, .cmp_form .buttons button, .cmp_form .buttons input[type="submit"],
.pkp_navigation_primary > li > a[href$="/submission"],
.pkp_block.block_make_submission .content a, .block_make_submission a,
.header_view .download {
  background: var(--grad-gold-v) !important;
  color: var(--on-gold) !important;
  border: 1px solid rgba(120,85,25,.35) !important;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 8px rgba(160,120,40,.28);
}
.cmp_button:hover, .pkp_button:hover, button.submit:hover,
input[type="submit"]:hover, .skf-btn-solid:hover,
.cmp_form .buttons button:hover, .cmp_form .buttons input[type="submit"]:hover,
.pkp_navigation_primary > li > a[href$="/submission"]:hover,
.pkp_block.block_make_submission .content a:hover, .block_make_submission a:hover,
.header_view .download:hover {
  background: var(--grad-gold-v-hov) !important;
  color: var(--on-gold) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 5px 14px rgba(160,120,40,.34);
}

/* the Make a Submission block frames its gold button on paper */
.pkp_block.block_make_submission {
  background: var(--grad-paper) !important;
  border-color: #E7D9BE !important;
}

/* ---- a gold hairline under the masthead ties the two together -------- */
.pkp_structure_head { border-bottom: 3px solid transparent; border-image: var(--grad-gold) 1; }

/* ---- links keep their footing on paper -------------------------------- */
a { color: var(--accent); }
a:hover, a:focus { color: #7A400F; }
.obj_article_summary:hover > h4.title > a { color: var(--accent); }
.obj_galley_link { background: #FFFDF8; }
.obj_galley_link:hover { background: var(--grad-gold-v); color: var(--on-gold); border-color: rgba(120,85,25,.35); }

/* CFP body copy sat at 4.29:1 against the gradient's darkest stop. Deepening
   it slightly clears AA across the whole sweep. */
.skf-cfp-text { color: #3F3018 !important; }

/* ==========================================================================
   MASTHEAD — light
   The brown header was heavy and fought the gold beneath it. Ancient Paper
   makes the seal the focal point, and the type carries the colour instead of
   the background. A slim brown strip still caps the page, and a Heritage Gold
   rule separates the masthead from the navigation.
   ========================================================================== */

.pkp_structure_head {
  background: var(--grad-paper) !important;
  border-bottom: none !important;
  border-image: none !important;
  position: relative;
}
/* a soft warm bloom instead of the old radial on brown */
.pkp_structure_head::after {
  background:
    radial-gradient(760px 300px at 85% -30%, rgba(200,155,60,.16), transparent 62%),
    radial-gradient(520px 240px at 5% 120%, rgba(212,138,46,.07), transparent 68%) !important;
}
/* Heritage Gold rule along the bottom edge */
.pkp_structure_head::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad-gold);
  z-index: 2;
}

/* ---- type now carries the colour ---- */
.skf-mast-title { color: var(--ink) !important; text-shadow: none !important; }
.skf-mast-title:hover { color: var(--accent) !important; }
.skf-mast-deva { color: #8A5A2E !important; }        /* Manuscript Brown, 4.8:1 */
.skf-mast-sub  { color: var(--body) !important; }
.skf-issn      { color: #7A6A54 !important; }

/* the seal gets a gentle lift so it sits on the paper rather than floating */
.pkp_site_name img, .pkp_site_name .is_img img {
  filter: drop-shadow(0 3px 10px rgba(120,85,25,.22));
}

/* menu button restyled for a light ground */
.pkp_site_nav_toggle {
  background: rgba(255,255,255,.7) !important;
  border-color: var(--line) !important;
}
.pkp_site_nav_toggle:hover { background: #fff !important; border-color: var(--bronze) !important; }
.pkp_site_nav_toggle > span { border-bottom-color: var(--ink) !important; }
.pkp_site_nav_toggle > span:before,
.pkp_site_nav_toggle > span:after { background: var(--ink) !important; }

/* ---- the top strip stays dark: a thin cap, ~5% of the page ---- */
.skf-topbar { background: #45301A; border-bottom: none; }

/* ---- galley reading bar matches the masthead ---- */
.header_view {
  background: var(--grad-paper) !important;
  border-bottom: 3px solid transparent;
  border-image: var(--grad-gold) 1;
}
.header_view .title { color: var(--ink) !important; text-shadow: none; }
.header_view .title:hover { color: var(--accent) !important; }
.header_view .return {
  background: rgba(255,255,255,.7) !important;
  border-color: var(--line) !important;
}
.header_view .return:hover { background: #fff !important; border-color: var(--bronze) !important; }
.header_view .return:before { color: var(--ink) !important; }

/* the ISSN line is small italic text, so it needs full AA rather than AA-large */
.skf-issn { color: #6A5C48 !important; }

/* ==========================================================================
   BAND RHYTHM — following the Journal of Tibetan Literature
   Their homepage alternates white → grey → a deep colour band → white →
   a bright accent band → footer. That dark band in the middle is what gives
   the page its structure; ours had none. Rendered in our own palette:

     intro            Palm Leaf Cream
     current issue    Ancient Paper
     what we publish  Manuscript Brown        <- the deep band
     previous issues  Palm Leaf Cream
     call for papers  Heritage Gold
     footer           Heading Brown
   ========================================================================== */

.skf-band-dark {
  background:
    radial-gradient(760px 340px at 88% -20%, rgba(200,155,60,.16), transparent 62%),
    linear-gradient(158deg, #6E4826 0%, #5A3A1E 55%, #4B3D2A 100%);
  border-top: 1px solid rgba(200,155,60,.28);
  border-bottom: 1px solid rgba(200,155,60,.28);
  color: #E6D7BC;
  position: relative;
}

.skf-band-dark .skf-sechead h2 { color: #FFF6E4; }
.skf-band-dark .skf-rule { background: rgba(231,196,106,.32); }
.skf-band-dark .skf-sechead a { color: var(--gold-bright); }
.skf-band-dark .skf-sechead a:hover { color: #FFF0C4; }
.skf-band-dark .skf-eyebrow { color: var(--gold-bright); }

/* cards read as inset panels rather than floating white blocks */
.skf-band-dark .skf-cat {
  background: rgba(255,253,248,.06) !important;
  border: 1px solid rgba(231,196,106,.24) !important;
  box-shadow: none;
}
.skf-band-dark .skf-cat::before { background: var(--gold-bright); }
.skf-band-dark .skf-cat h3 { color: var(--gold-bright); }
.skf-band-dark .skf-cat p  { color: #DDCDB2; }
.skf-band-dark .skf-cat:hover {
  background: rgba(255,253,248,.11) !important;
  border-color: rgba(231,196,106,.45) !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -20px rgba(0,0,0,.55);
}

/* the previous-issues row now sits on light, so its tiles need a light ground */
.skf-prev .skf-prev-label { color: var(--ink); }
.skf-prev .skf-prev-item:hover .skf-prev-label { color: var(--accent); }

/* ==========================================================================
   BUTTONS — modern
   The previous treatment used a vertical gradient with an inset white top
   edge, which is the glossy, beveled look of a decade ago. Flat fills, a
   single soft shadow and motion that responds on press read as current.
   Colour, contrast and the brand gold are unchanged.
   ========================================================================== */

.cmp_button, .pkp_button, button.submit, input[type="submit"],
.skf-btn, .skf-btn-solid,
.cmp_form .buttons button, .cmp_form .buttons input[type="submit"],
.pkp_navigation_primary > li > a[href$="/submission"],
.pkp_block.block_make_submission .content a, .block_make_submission a,
.header_view .download, .skf-top-submit, .obj_galley_link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(75,61,42,.10) !important;
  transition:
    background-color .2s cubic-bezier(.4,0,.2,1),
    color            .2s cubic-bezier(.4,0,.2,1),
    border-color     .2s cubic-bezier(.4,0,.2,1),
    box-shadow       .25s cubic-bezier(.4,0,.2,1),
    transform        .12s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}

/* a single light sweep on hover, rather than a permanent gloss */
.cmp_button::after, .pkp_button::after, button.submit::after,
input[type="submit"]::after, .skf-btn-solid::after,
.cmp_form .buttons button::after,
.pkp_navigation_primary > li > a[href$="/submission"]::after,
.block_make_submission a::after, .header_view .download::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: -1;
}
.cmp_button:hover::after, .pkp_button:hover::after, button.submit:hover::after,
input[type="submit"]:hover::after, .skf-btn-solid:hover::after,
.cmp_form .buttons button:hover::after,
.pkp_navigation_primary > li > a[href$="/submission"]:hover::after,
.block_make_submission a:hover::after, .header_view .download:hover::after {
  transform: translateX(120%);
}

/* ---- primary: flat Heritage Gold ---- */
.cmp_button, .pkp_button, button.submit, input[type="submit"],
.skf-btn-solid, .cmp_form .buttons button, .cmp_form .buttons input[type="submit"],
.pkp_navigation_primary > li > a[href$="/submission"],
.pkp_block.block_make_submission .content a, .block_make_submission a,
.header_view .download {
  background: var(--gold) !important;
  background-image: none !important;
  color: var(--on-gold) !important;
}
.cmp_button:hover, .pkp_button:hover, button.submit:hover,
input[type="submit"]:hover, .skf-btn-solid:hover,
.cmp_form .buttons button:hover, .cmp_form .buttons input[type="submit"]:hover,
.pkp_navigation_primary > li > a[href$="/submission"]:hover,
.pkp_block.block_make_submission .content a:hover, .block_make_submission a:hover,
.header_view .download:hover {
  background: var(--gold-dk) !important;
  background-image: none !important;
  color: var(--on-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(160,120,40,.42) !important;
}
/* press */
.cmp_button:active, .pkp_button:active, button.submit:active,
input[type="submit"]:active, .skf-btn-solid:active,
.cmp_form .buttons button:active,
.pkp_navigation_primary > li > a[href$="/submission"]:active,
.block_make_submission a:active, .header_view .download:active, .skf-btn:active {
  transform: translateY(0) scale(.978);
  box-shadow: 0 1px 2px rgba(75,61,42,.14) !important;
  transition-duration: .06s !important;
}

/* ---- secondary: outlined, fills on hover ---- */
.skf-btn-outline, .skf-btn-ghost {
  background: transparent !important;
  background-image: none !important;
  color: var(--accent) !important;
  border: 1.5px solid var(--line) !important;
  box-shadow: none !important;
}
.skf-btn-outline:hover, .skf-btn-ghost:hover {
  background: var(--accent-soft) !important;
  border-color: var(--bronze) !important;
  color: var(--accent-dk) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px -5px rgba(150,83,22,.30) !important;
}

/* ---- galley chips ---- */
.obj_galley_link {
  background: #FFFDF8 !important; background-image: none !important;
  border: 1.5px solid var(--line) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.obj_galley_link:hover {
  background: var(--gold) !important; background-image: none !important;
  color: var(--on-gold) !important; border-color: var(--gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -3px rgba(160,120,40,.38) !important;
}

/* ---- top-strip pill ---- */
.skf-top-submit {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.skf-top-submit:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--on-gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -3px rgba(160,120,40,.45) !important;
}

/* ---- CFP band buttons ---- */
.skf-cfp .skf-btn-gold {
  background: #4B3D2A !important; background-image: none !important;
  color: #FFF3D6 !important; border-color: #4B3D2A !important;
  box-shadow: 0 2px 6px rgba(59,46,30,.28) !important;
}
.skf-cfp .skf-btn-gold:hover {
  background: #33291B !important; color: #FFF3D6 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(59,46,30,.5) !important;
}
.skf-cfp .skf-btn-outline {
  background: rgba(255,255,255,.4) !important;
  border-color: rgba(75,61,42,.45) !important;
  color: #4B3D2A !important;
}
.skf-cfp .skf-btn-outline:hover {
  background: rgba(255,255,255,.72) !important;
  border-color: #4B3D2A !important; color: #33291B !important;
}

/* ---- keyboard focus is a first-class state ---- */
.cmp_button:focus-visible, .pkp_button:focus-visible, button.submit:focus-visible,
input[type="submit"]:focus-visible, .skf-btn:focus-visible,
.pkp_navigation_primary > li > a[href$="/submission"]:focus-visible,
.block_make_submission a:focus-visible, .header_view .download:focus-visible,
.skf-top-submit:focus-visible, .obj_galley_link:focus-visible {
  outline: 3px solid var(--bronze) !important;
  outline-offset: 3px !important;
  box-shadow: 0 6px 16px -4px rgba(160,120,40,.42) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cmp_button, .pkp_button, button.submit, input[type="submit"], .skf-btn,
  .obj_galley_link, .skf-top-submit, .header_view .download {
    transition: background-color .15s linear, color .15s linear !important;
    transform: none !important;
  }
  .cmp_button::after, .pkp_button::after, button.submit::after,
  .skf-btn-solid::after, .block_make_submission a::after { display: none; }
}

/* ==========================================================================
   HOMEPAGE — JTL layout in our palette
   Their hero states the journal's name, its three strands and what it is for,
   in that order, and lets the type carry it with no ornament.
   ========================================================================== */

.skf-hero-band { padding: 3.4rem 0 3rem; text-align: center; }
.skf-hero-name {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 .7rem;
  letter-spacing: -.018em;
}
.skf-hero-strands {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 1.6rem;
}
.skf-hero-blurb {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.78;
  color: var(--body);
}

/* "In the current issue" — JTL's small label above the contents */
.skf-incurrent {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: .2rem 0 .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.skf-hero-title { margin-bottom: .5rem; }

/* three strands, evenly weighted */
.skf-cat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.skf-band-dark.skf-cats { padding: 3.2rem 0; }
.skf-cat-grid-3 .skf-cat { padding: 1.7rem 1.5rem; }
.skf-cat-grid-3 .skf-cat h3 {
  font-size: 1.28rem; margin-bottom: .55rem; font-family: var(--serif);
}
.skf-cat-grid-3 .skf-cat p { font-size: .96rem; line-height: 1.62; }

/* invitation band: a single centred statement, as JTL's yellow row */
.skf-cfp-band .skf-cfp { text-align: center; padding: 3.2rem 1.4rem; }
.skf-cfp-lead {
  max-width: 64ch; margin: 0 auto 1.5rem !important;
  font-size: 1.08rem; line-height: 1.72;
}
.skf-cfp-actions { justify-content: center; }
.skf-cfp .skf-btn { min-width: 148px; justify-content: center; }

@media (max-width: 860px) {
  .skf-cat-grid-3 { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 767px) {
  .skf-hero-band { padding: 2.4rem 0 2.2rem; }
  .skf-hero-name { font-size: 1.72rem; }
  .skf-hero-strands { font-size: .74rem; letter-spacing: .17em; margin-bottom: 1.1rem; }
  .skf-hero-blurb { font-size: 1rem; line-height: 1.7; }
  .skf-cfp-band .skf-cfp { padding: 2.2rem 1.1rem; }
  .skf-cfp-lead { font-size: 1rem; }
  .skf-cfp .skf-btn { width: 100%; }
}

/* ==========================================================================
   GALLEY VIEWERS — fill the window
   The PDF view no longer carries a footer, so it gets the full height below
   the bar. The HTML view keeps its footer and allows for it.
   ========================================================================== */

#pdfCanvasContainer, body.pkp_op_view #pdfCanvasContainer {
  height: calc(100vh - 62px) !important;
  min-height: 520px;
  border: 0; background: #3B3B3E;   /* PDF.js's own page surround */
}
#htmlContainer {
  height: calc(100vh - 62px - 46px) !important;
  min-height: 480px;
  border: 0; background: var(--bg-alt);
}
#pdfCanvasContainer iframe, #htmlContainer iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
body.pkp_op_view { overflow: hidden; }

@media (max-width: 640px) {
  #pdfCanvasContainer, body.pkp_op_view #pdfCanvasContainer { height: calc(100vh - 56px) !important; }
  #htmlContainer { height: calc(100vh - 56px - 60px) !important; }
}

/* ==========================================================================
   GALLEY BAR — stated at the same specificity as anything that came before,
   so it cannot be outranked on the galley pages.
   ========================================================================== */
body.pkp_op_view .header_view,
body.pkp_page_article .header_view,
.header_view {
  background: var(--grad-paper) !important;
  border-bottom: 3px solid transparent !important;
  border-image: var(--grad-gold) 1 !important;
}
body.pkp_op_view .header_view .title,
.header_view .title { color: var(--ink) !important; text-shadow: none !important; }
body.pkp_op_view .header_view .title:hover,
.header_view .title:hover { color: var(--accent) !important; }
body.pkp_op_view .header_view .return,
.header_view .return {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--line) !important;
}
body.pkp_op_view .header_view .return:before,
.header_view .return:before { color: var(--ink) !important; }
body.pkp_op_view .header_view .download,
.header_view .download {
  background: var(--gold) !important; color: var(--on-gold) !important;
  border: 1px solid rgba(120,85,25,.35) !important;
}

/* ==========================================================================
   GALLEY VIEWER — the theme bar was covering the PDF.js toolbar
   The parent theme lays this out as:

     .galley_view        { position:absolute; top:0; left:0; right:0; bottom:0 }
     .galley_view iframe { height:100%; padding-top:2.143rem }

   i.e. the frame starts at the very top of the window and a 30px padding
   nudges its contents clear of the parent's 30px bar. Our bar is ~62px tall,
   so the frame still began at y=0 and the bar sat over its first 62px — which
   is precisely where PDF.js draws its toolbar. The document rendered; the
   controls were hidden underneath the header.

   Taking the container out of absolute positioning lets it flow beneath the
   bar, and the inherited padding is no longer needed.
   ========================================================================== */

.galley_view,
#pdfCanvasContainer,
#htmlContainer,
body.pkp_op_view .galley_view,
body.pkp_op_view #pdfCanvasContainer {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  overflow: hidden !important;
  height: calc(100vh - 62px) !important;
  min-height: 480px;
  border: 0;
}

.galley_view iframe,
#pdfCanvasContainer iframe,
#htmlContainer iframe,
.galley_view.galley_view_with_notice iframe {
  padding-top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

/* the notice banner, when a reader is on an older version, needs its own room */
.galley_view.galley_view_with_notice { height: calc(100vh - 62px - 4.286rem) !important; }
.galley_view .galley_view_notice { position: static !important; height: auto !important; }
.galley_view .galley_view_notice_message {
  position: static !important; transform: none !important; padding: .6rem 1rem;
}

/* the HTML reader keeps its footer, so allow for it */
#htmlContainer { height: calc(100vh - 62px - 46px) !important; }

@media (max-width: 640px) {
  .galley_view, #pdfCanvasContainer, body.pkp_op_view #pdfCanvasContainer {
    height: calc(100vh - 56px) !important;
  }
  #htmlContainer { height: calc(100vh - 56px - 60px) !important; }
}

/* ==========================================================================
   GALLEY BAR — hover states
   The parent paints these with its own blue on hover and focus:
     .header_view .title:hover  { background:#008acb }
     .header_view .return:hover { background:#008acb; color:#fff }
     .header_view .download:hover { background:#008acb; color:#fff }
   ========================================================================== */

body.pkp_op_view .header_view .title,
.header_view .title { background: transparent !important; border-radius: 6px; }

body.pkp_op_view .header_view .title:hover,
body.pkp_op_view .header_view .title:focus,
.header_view .title:hover,
.header_view .title:focus {
  background: rgba(150,83,22,.08) !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  outline: none;
}
body.pkp_op_view .header_view .title:focus-visible,
.header_view .title:focus-visible { outline: 2px solid var(--bronze) !important; outline-offset: 2px; }

body.pkp_op_view .header_view .return:hover,
body.pkp_op_view .header_view .return:focus,
.header_view .return:hover, .header_view .return:focus {
  background: #fff !important;
  border-color: var(--bronze) !important;
  color: var(--ink) !important;
}
body.pkp_op_view .header_view .download:hover,
body.pkp_op_view .header_view .download:focus,
.header_view .download:hover, .header_view .download:focus {
  background: var(--gold-dk) !important;
  color: var(--on-gold) !important;
}

/* ==========================================================================
   FORM FIELDS — smaller
   50px tall with 1rem type was oversized for a page of them. Brought back to
   a normal 42px control, keeping 16px on phones so iOS does not zoom on focus.
   ========================================================================== */

.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form input[type="search"],
.cmp_form select,
.cmp_form textarea,
.page_search input[type="text"],
.page_search select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], select, textarea {
  min-height: 42px !important;
  height: auto !important;
  padding: .52rem .75rem !important;
  font-size: .95rem !important;
  line-height: 1.4 !important;
  border-radius: 7px !important;
  border-width: 1px !important;
}
.cmp_form textarea, textarea { min-height: 104px !important; padding-top: .55rem !important; }
.cmp_form select, select { padding-right: 2.1rem !important; }

.cmp_form label, .cmp_form .label {
  font-size: .8rem !important;
  margin-bottom: .32rem !important;
}
.cmp_form .fields > div { margin-bottom: .8rem !important; }

.cmp_form .buttons { margin-top: 1.3rem; padding-top: 1.1rem; }
.cmp_form .buttons button,
.cmp_form .buttons input[type="submit"] {
  min-height: 42px !important;
  padding: .55rem 1.45rem !important;
  font-size: .93rem !important;
}

/* consent rows scale with the fields */
.cmp_form .optin, .cmp_form .consent { padding: .72rem .9rem !important; margin-bottom: .65rem !important; }
.cmp_form .optin input[type="checkbox"],
.cmp_form .consent input[type="checkbox"] { width: 17px !important; height: 17px !important; }
.cmp_form .optin label, .cmp_form .consent label { font-size: .88rem !important; }

/* the search page's date selects are narrow by nature */
.page_search .date_range select { min-width: 5.2em; min-height: 42px !important; }
.page_search fieldset { padding: .95rem 1.1rem; }

@media (max-width: 600px) {
  .cmp_form input[type="text"], .cmp_form input[type="email"],
  .cmp_form input[type="password"], .cmp_form select, .cmp_form textarea,
  input[type="text"], input[type="email"], input[type="password"], select, textarea {
    font-size: 16px !important;      /* stops iOS zooming on focus */
    min-height: 44px !important;
  }
}

/* ==========================================================================
   LOGIN / REGISTER — narrower, tighter
   The width cap I put on .pkp_structure_main is cancelled by the sidebar grid
   rule (`max-width: none !important`), so the fields stretched the full column
   and read as oversized. Constrain the form itself instead, and bring the
   controls down to a normal size.
   ========================================================================== */

.page_login .cmp_form,
.page_register .cmp_form,
.page_lost_password .cmp_form,
.page_user .cmp_form {
  max-width: 460px;
  margin-inline: auto;
}
.page_register .cmp_form { max-width: 560px; }

.page_login .pkp_structure_main,
.page_register .pkp_structure_main { padding-top: 1.6rem; }
.page_login .page > h1:first-child,
.page_register .page > h1:first-child { text-align: center; }
.page_login .cmp_form + p,
.page_register .cmp_form + p { max-width: 460px; margin-inline: auto; text-align: center; }

/* ---- controls: a normal 38px field ---- */
.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form input[type="search"],
.cmp_form select,
.cmp_form textarea {
  min-height: 38px !important;
  padding: .4rem .7rem !important;
  font-size: .92rem !important;
  line-height: 1.35 !important;
  border-radius: 6px !important;
}
.cmp_form textarea { min-height: 92px !important; }

.cmp_form label, .cmp_form .label {
  font-size: .78rem !important;
  margin-bottom: .26rem !important;
  letter-spacing: .005em;
}
.cmp_form .fields > div {
  margin-bottom: .62rem !important;
  padding-bottom: 0 !important;
}
.cmp_form fieldset > legend, .cmp_form legend {
  font-size: .72rem !important;
  margin-bottom: .5rem !important;
}

/* ---- consent rows ---- */
.cmp_form .optin, .cmp_form .consent {
  padding: .55rem .75rem !important;
  margin-bottom: .5rem !important;
  border-radius: 6px !important;
  gap: .5rem;
}
.cmp_form .optin label, .cmp_form .consent label {
  font-size: .84rem !important; line-height: 1.45 !important;
}
.cmp_form .optin input[type="checkbox"],
.cmp_form .consent input[type="checkbox"] {
  width: 15px !important; height: 15px !important; margin-top: .16rem !important;
}

/* ---- actions ---- */
.cmp_form .buttons { margin-top: 1.1rem !important; padding-top: .95rem !important; }
.cmp_form .buttons button,
.cmp_form .buttons input[type="submit"] {
  min-height: 38px !important;
  padding: .45rem 1.3rem !important;
  font-size: .9rem !important;
}
.cmp_form .buttons a { font-size: .88rem; }

@media (max-width: 600px) {
  .page_login .cmp_form, .page_register .cmp_form { max-width: none; }
  .cmp_form input[type="text"], .cmp_form input[type="email"],
  .cmp_form input[type="password"], .cmp_form select, .cmp_form textarea {
    font-size: 16px !important;    /* below this iOS zooms on focus */
    min-height: 42px !important;
    padding: .5rem .7rem !important;
  }
  .cmp_form .buttons button, .cmp_form .buttons input[type="submit"] { min-height: 42px !important; }
}

/* =================================================== content pages (2026)
 *
 * The About / Call for Papers / Submissions / Policies pages introduced by
 * the interface proposal. Written as custom navigation-menu pages, so the
 * markup here is whatever those pages contain — plain headings and lists,
 * plus the handful of classes below.
 */

.pkp_structure_main .page > h1:first-child + .skf-page-lead,
.skf-page-lead {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.pkp_structure_main .page h2 {
  font-size: 1.32rem;
  margin: 2.4rem 0 .85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.pkp_structure_main .page h2:first-of-type { padding-top: 0; border-top: 0; }
.pkp_structure_main .page h3 { font-size: 1.06rem; margin: 1.7rem 0 .6rem; }
.pkp_structure_main .page ul,
.pkp_structure_main .page ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
.pkp_structure_main .page li { margin-bottom: .45rem; }
.pkp_structure_main .page li > ul,
.pkp_structure_main .page li > ol { margin-top: .45rem; }

.pkp_structure_main .page blockquote {
  margin: 1.2rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

/* ---- highlighted note ---- */
.skf-callout {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 1.15rem 1.3rem;
  margin: 1.6rem 0 2rem;
}
.skf-callout p { margin: 0 0 .7rem; }
.skf-callout p:last-child { margin-bottom: 0; }
.skf-callout .skf-btn { margin-top: .2rem; }

/* ---- timetables and fact tables ---- */
.pkp_structure_main .skf-timeline,
.pkp_structure_main .skf-facts {
  margin: .4rem 0 1.7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.pkp_structure_main .skf-timeline th[scope="col"],
.pkp_structure_main .skf-facts th[scope="col"] { background: var(--bg-alt); }
.pkp_structure_main .skf-timeline td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkp_structure_main .skf-facts th[scope="row"] {
  text-transform: none; letter-spacing: 0; font-size: .9rem;
  font-weight: 600; color: var(--ink); width: 34%;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.pkp_structure_main .skf-facts tbody tr:last-child th,
.pkp_structure_main .skf-facts tbody tr:last-child td,
.pkp_structure_main .skf-timeline tbody tr:last-child td { border-bottom: 0; }

/* the article-types table carries four columns and needs to breathe */
.pkp_structure_main .skf-facts thead th { width: auto; }

@media (max-width: 640px) {
  .pkp_structure_main .skf-timeline,
  .pkp_structure_main .skf-facts { display: block; overflow-x: auto; }
  .pkp_structure_main .skf-facts th[scope="row"] { width: auto; }
}

/* ---- reference examples ---- */
.skf-ref {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin: .6rem 0 1.5rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--body);
}

/* ---- policy index ---- */
.skf-policy-index { margin-top: .4rem; }
.skf-policy-index h3 {
  font-size: 1.04rem; margin: 1.6rem 0 .3rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
}
.skf-policy-index h3:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.skf-policy-index p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---- the twelve-step author journey ---- */
.skf-journey {
  margin: 2.4rem 0 0;
  padding: 1.5rem 1.6rem 1.2rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.skf-journey h2 {
  font-size: 1.06rem !important;
  margin: 0 0 1rem !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.pkp_structure_main .page .skf-journey-steps {
  list-style: none;
  counter-reset: skfstep;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem .9rem;
}
.skf-journey-steps li {
  counter-increment: skfstep;
  position: relative;
  padding-left: 2rem;
  font-size: .92rem;
  margin: 0;
  line-height: 1.5;
}
.skf-journey-steps li::before {
  content: counter(skfstep);
  position: absolute; left: 0; top: .05rem;
  width: 1.4rem; height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  color: var(--accent);
}

/* ---- buttons inside page content ---- */
.pkp_structure_main .page .skf-btn { margin: .2rem .5rem .2rem 0; }

/* ==================================== homepage call-for-papers highlight
 *
 * A short box only — dates and one line of text. Everything else lives on
 * the Call for Papers page, which the buttons open into.
 */

.skf-cfp-highlight { border-top: 1px solid var(--line); }

.skf-cfphl {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, .95fr);
  gap: 2.4rem;
  align-items: start;
}

.skf-cfphl-title {
  font-size: 1.75rem;
  margin: .15rem 0 .7rem;
  line-height: 1.2;
}
.skf-cfphl-text {
  margin: 0 0 1.3rem;
  max-width: 46rem;
  color: var(--body);
}
.skf-cfphl-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.skf-cfphl-dates {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .35rem 1.15rem;
  box-shadow: var(--sh);
}
.skf-cfphl-dates > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.skf-cfphl-dates > div:last-child { border-bottom: 0; }
.skf-cfphl-dates dt {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.skf-cfphl-dates dd {
  margin: 0;
  font-family: var(--serif);
  font-size: .96rem;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .skf-cfphl { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 600px) {
  .skf-cfphl-title { font-size: 1.45rem; }
  .skf-cfphl-actions .skf-btn { width: 100%; justify-content: center; }
}

/* ============================================ editorial dashboard (editors)
 *
 * plugins/generic/skfEditorial. Editor-only, so it is never seen by a reader,
 * but it uses the same type, palette and card language as the public pages.
 */

.skf-ed .skf-ed-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 2.4rem; }

.skf-ed-group { margin: 0 0 2.6rem; }
.skf-ed-stage {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.skf-ed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.skf-ed-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.25rem 1.3rem 1.15rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.skf-ed-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .25s var(--ease);
}
.skf-ed-card:hover,
.skf-ed-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--sh-lift);
  text-decoration: none;
}
.skf-ed-card:hover::before,
.skf-ed-card:focus-visible::before { transform: scaleY(1); }

.skf-ed-count {
  font-family: var(--serif);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.skf-ed-count-zero { color: var(--line); }

.skf-ed-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.skf-ed-note { font-size: .87rem; line-height: 1.5; color: var(--body); }
.skf-ed-next {
  margin-top: .5rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

/* the roll-up is a total, not a queue — read it, don't work it */
.skf-ed-card-rollup { background: var(--bg-alt); }
.skf-ed-card-rollup .skf-ed-count { color: var(--gold); }

.skf-ed-foot {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--muted);
}

@media (max-width: 600px) {
  .skf-ed .skf-ed-actions .skf-btn { width: 100%; justify-content: center; }
  .skf-ed-count { font-size: 2rem; }
}

/* editor-only link in the top strip — quieter than the Submit button */
.skf-top-editorial {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: .22rem .8rem;
  white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.skf-top-editorial:hover,
.skf-top-editorial:focus {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.6);
  color: #fff;
  text-decoration: none;
}

/* the standing procedure, kept beside the counts so nobody has to go looking */
.skf-ed-sop > p { max-width: 60rem; }
.skf-ed-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.skf-ed-step {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.2rem 1.3rem 1rem;
}
.skf-ed-step h3 {
  font-size: 1rem;
  margin: 0 0 .7rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.skf-ed-step ol { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.skf-ed-step li { margin-bottom: .4rem; line-height: 1.5; }
.skf-ed-step-note {
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--muted);
}