/* ============================================================================
   SOLAR CELL INSIGHTS — child theme stylesheet
   ----------------------------------------------------------------------------
   Loaded automatically by the "sci" theme plugin (see ../SciThemePlugin.php).
   No manual upload needed — this file ships with the theme.

   Sections 1-10 are the sitewide palette/type/component rules (formerly
   solar-cell-insights.css, uploaded by hand as a "Custom stylesheet" — that
   upload is now obsolete, see the repo README). Section 11 restyles the
   stock Default theme's structural classes. Section 12 is new: the home
   page and utility bar built in indexJournal.tpl / header.tpl, per
   SCI-DOC-02.

   Palette per SCI-DOC-02 §3.1.
   ========================================================================== */

:root {
  --sci-gold:    #F5B301;
  --sci-amber:   #D99A00;
  --sci-bronze:  #8A5A00;
  --sci-carbon:  #1A1A18;
  --sci-graphite:#33322D;
  --sci-warm:    #6B6860;
  --sci-white:   #FFFFFF;
  --sci-ivory:   #FEFCF6;
  --sci-sand:    #FBF4E2;
  --sci-black:   #14130F;
  --sci-line:    #EAE3D2;
  --sci-line-strong: #D8CEB4;

  /* Roles used by the article PDF (plugins/generic/sciSubmission/pdf reads
     these). Point them at other colours - or change the colours above - and
     the PDF galley follows the site. Only plain colour values are read. */
  --sci-brand:      var(--sci-gold);     /* rules, bars, buttons */
  --sci-brand-text: var(--sci-bronze);   /* headings, links (readable on white) */
  --sci-brand-soft: var(--sci-sand);     /* abstract band, cite bar */
  --sci-ink:        var(--sci-carbon);   /* body text */
  --sci-muted:      var(--sci-warm);     /* footer, small print */
  --sci-rule:       var(--sci-line-strong);
  --sci-on-brand:   var(--sci-carbon);   /* text on a --sci-brand background */

  --sci-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sci-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sci-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 0. Self-hosted fonts ------------------------------------------
   Source Serif 4, Inter and IBM Plex Mono, all open-licence (SIL OFL 1.1).
   Vendored under styles/fonts/ and served from this domain — no request to
   Google at runtime, so no reader IP address is sent to a third party. Latin
   + Latin-Extended subsets only (covers English and German, incl. ä ö ü ß).
   Inter ships as a single variable-font file per subset, so one @font-face
   with a weight range covers 400-700 instead of a file per weight.        */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/SourceSerif4-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/SourceSerif4-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Base type ------------------------------------------------- */

body,
.pkp_structure_page {
  font-family: var(--sci-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--sci-graphite);
  background: var(--sci-white);
}

/* Headings.
   NOTE the `.pkp_structure_main` prefix — it is load-bearing, do not remove it.
   The inherited Default theme styles headings as `.pkp_structure_main h1`
   (specificity 0,1,1), which outranks a bare `h1` (0,0,1) OR a single class
   such as `.sci_hero_title` (0,1,0). Without this prefix every heading on the
   site silently falls back to the parent theme's Noto Sans at its own sizes —
   the serif never appears, however many @font-face rules are loaded.
   Scale mirrors the mockup's global h1-h4 rules. */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.obj_article_summary > .title,
.obj_article_details > .page_title,
.obj_issue_toc > .heading {
  font-family: var(--sci-serif);
  color: var(--sci-carbon);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.pkp_structure_main h1 { font-size: clamp(38px, 4.6vw, 60px); font-weight: 600; }
.pkp_structure_main h2 { font-size: clamp(26px, 2.5vw, 34px); font-weight: 600; }
.pkp_structure_main h3 { font-size: 21px; font-weight: 600; line-height: 1.3; }
.pkp_structure_main h4 { font-size: 18px; font-weight: 600; }

a { color: var(--sci-bronze); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--sci-carbon); }

:focus-visible { outline: 3px solid var(--sci-gold); outline-offset: 2px; }
::selection { background: var(--sci-gold); color: var(--sci-carbon); }

/* ---------- 2. Site header ------------------------------------------------ */

.pkp_structure_head {
  background: var(--sci-white);
  border-bottom: 1px solid var(--sci-line);
}

.pkp_site_name,
.pkp_site_name .is_img img { max-height: 56px; }

.pkp_site_name .is_text {
  font-family: var(--sci-serif);
  font-weight: 600;
  font-size: 25px;
  color: var(--sci-carbon);
}

/* Primary navigation */
.pkp_navigation_primary > li > a {
  font-family: var(--sci-sans);
  font-weight: 550;
  font-size: 15.5px;
  color: var(--sci-graphite);
  border-bottom: 4px solid transparent;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
  color: var(--sci-carbon);
  border-bottom-color: var(--sci-gold);
  background: transparent;
}

/* Dropdowns */
.pkp_navigation_primary > li { position: relative; }
/* This OJS version never adds the Bootstrap `.dropdown-menu` class the note
   below assumes, and ships no positioning of its own for this submenu — live-
   checked via the browser: the <ul> computes to `position: static` with an
   empty class list. Without an explicit position here, the submenu opens in
   normal document flow (pushed down, flush to the page's left edge) instead
   of as a floating card under its trigger link. */
.pkp_navigation_primary ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 240px;
  background: var(--sci-white);
  border: 1px solid var(--sci-line);
  border-top: 4px solid var(--sci-gold);
  box-shadow: 0 18px 44px rgba(26,26,24,.13);
}
.pkp_navigation_primary ul a:hover { background: var(--sci-sand); }
/* The Default theme's Bootstrap dropdown JS adds a `.dropdown-menu` class to
   the open submenu, which carries its own `a` colour rule at a specificity
   this file's bare `a { color: var(--sci-bronze) }` (section 1) can't beat —
   dropdown links were rendering in OJS's stock blue regardless of the rules
   above. !important is the only reliable way to win this one. */
.pkp_navigation_primary .dropdown-menu a { color: var(--sci-graphite) !important; }
.pkp_navigation_primary .dropdown-menu a:hover {
  color: var(--sci-carbon) !important;
  background: var(--sci-sand) !important;
}

/* ---------- 3. Buttons — one system, three fills -------------------------- */
/* Every button is a 2px carbon-bordered rectangle. Only the fill changes.    */

.cmp_button,
.cmp_button_wire,
.pkp_button,
button.submitFormButton,
input[type="submit"],
.obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sci-sans);
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  padding: 13px 22px;
  min-height: 46px;
  border: 2px solid var(--sci-carbon) !important;
  border-radius: 2px;
  background: var(--sci-white);
  color: var(--sci-carbon) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.cmp_button:hover,
.pkp_button:hover,
.obj_galley_link:hover,
input[type="submit"]:hover { background: var(--sci-sand); }

/* Primary action — gold fill, carbon text (9.4:1, passes AAA) */
.cmp_button_primary,
button.submitFormButton,
input[type="submit"],
.obj_galley_link.pdf,
.block_make_submission a {
  background: var(--sci-gold) !important;
  color: var(--sci-carbon) !important;
}
.cmp_button_primary:hover,
button.submitFormButton:hover,
input[type="submit"]:hover,
.obj_galley_link.pdf:hover,
.block_make_submission a:hover { background: var(--sci-amber) !important; }

.obj_galley_link.pdf,
.block_make_submission a { text-shadow: none; }

/* ---------- 4. Article lists and issue tables of contents ------------------ */

.obj_article_summary {
  border-top: 3px solid var(--sci-carbon);
  padding-top: 18px;
  margin-bottom: 30px;
}
.obj_article_summary > .title a {
  font-family: var(--sci-serif);
  font-size: 19.5px;
  font-weight: 600;
  color: var(--sci-carbon);
  text-decoration: none;
}
.obj_article_summary > .title a:hover { color: var(--sci-bronze); text-decoration: underline; }

.obj_article_summary .meta,
.obj_article_summary .published,
.obj_article_details .item.doi,
.obj_article_details .item.published .value,
.obj_issue_toc .pages {
  font-family: var(--sci-mono);
  font-size: 12.5px;
  color: var(--sci-warm);
}

.obj_article_summary .authors { font-size: 15.5px; color: var(--sci-graphite); }

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
  font-family: var(--sci-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sci-bronze);
  border-bottom: 1px solid var(--sci-line);
  padding-bottom: 8px;
}

/* ---------- 5. Article landing page ---------------------------------------- */

.obj_article_details .page_title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 600;
}
.obj_article_details .authors { font-size: 18px; }
.obj_article_details .abstract { font-size: 18px; line-height: 1.75; }

.obj_article_details .keywords .value a,
.obj_article_details .categories .value a {
  display: inline-block;
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--sci-line);
  border-radius: 2px;
  color: var(--sci-graphite);
  text-decoration: none;
}
.obj_article_details .keywords .value a:hover { background: var(--sci-sand); border-color: var(--sci-carbon); }

.obj_article_details .categories .value a[href*="negative"],
.obj_article_summary .categories a[href*="negative"] {
  background: var(--sci-gold);
  border-color: var(--sci-gold);
  color: var(--sci-carbon);
  font-weight: 600;
}

/* ---------- 6. Sidebar blocks ----------------------------------------------- */

.pkp_block {
  background: var(--sci-ivory);
  border: 1px solid var(--sci-line);
  border-top: 4px solid var(--sci-gold);
  padding: 20px;
}
.pkp_block .title {
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sci-bronze);
  margin-bottom: 12px;
}

/* ---------- 7. Announcements ------------------------------------------------ */

.obj_announcement_summary {
  border-top: 3px solid var(--sci-carbon);
  padding-top: 16px;
}
.obj_announcement_summary .date {
  font-family: var(--sci-mono);
  font-size: 12.5px;
  color: var(--sci-warm);
}

/* ---------- 8. Footer -------------------------------------------------------- */

.pkp_structure_footer_wrapper {
  background: var(--sci-black);
  color: #E8E4D8;
  border-top: 6px solid var(--sci-gold);
}
.pkp_structure_footer_wrapper a { color: #E8E4D8; }
.pkp_structure_footer_wrapper a:hover { color: var(--sci-gold); }
.pkp_structure_footer_wrapper h2,
.pkp_structure_footer_wrapper h3,
.pkp_structure_footer_wrapper strong {
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sci-gold);
}
.pkp_brand_footer { opacity: .55; }

/* ---------- 9. Forms ---------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], textarea, select {
  border: 2px solid var(--sci-carbon);
  border-radius: 2px;
  font-family: var(--sci-sans);
  font-size: 16px;
  padding: 10px 14px;
}
input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--sci-gold);
  outline-offset: 1px;
}

.pkp_form .checkbox label { font-size: 16px; line-height: 1.6; }

/* ---------- 10. Accessibility guardrails --------------------------------------- */

.pkp_structure_page a:focus,
.pkp_structure_page button:focus { outline: 3px solid var(--sci-gold); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   11. DEFAULT THEME STRUCTURAL OVERRIDES
   ----------------------------------------------------------------------------
   The inherited Default theme paints its nav bar from its own colour option,
   not from ordinary CSS. These rules override it directly.

   Nav lives in the SAME white header row as the logo (per the mockup) — one
   bar, not a separate black band underneath. Section 2 above already sets
   dark-on-white nav link styling; this section used to re-force black/light
   text on top of it. It no longer does — it only lays the row out.
   ========================================================================== */

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_search_wrapper,
.pkp_head_wrapper .pkp_navigation_primary_row {
  background: transparent !important;
  border-bottom: none !important;
}

.pkp_head_wrapper {
  background: var(--sci-white) !important;
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
}

/* Every one of these four elements carries an explicit width or margin from
   the Default theme's old full-width layout (measured live: name_wrapper
   width 1160px, primary_wrapper width 1160px, nav_menu/primary_row width
   1320px, name_wrapper margin "0 auto"). Left alone, that's ~2480px of
   claimed space inside a 1320px row, so the flex-wrap:wrap above kicks in
   and the nav drops to its own line under the logo instead of sitting
   right-aligned beside it. None of the four is optional — dropping any one
   reintroduces the wrap. Verified at 1280px and 1920px viewports. */
.pkp_site_name_wrapper {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto;
}
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
.pkp_navigation_primary_wrapper {
  display: flex;
  justify-content: flex-end;
}
.pkp_navigation_primary {
  width: auto !important;
  max-width: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.pkp_navigation_primary > li > a { padding: 8px 14px; }
.pkp_site_name .is_text,
.pkp_site_name a {
  font-family: var(--sci-serif) !important;
  font-weight: 600;
  font-size: 30px;
  color: var(--sci-carbon) !important;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.pkp_search input[type="search"],
.pkp_navigation_search_wrapper input {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(232,228,216,.32);
  color: #E8E4D8;
  border-radius: 2px;
}
.pkp_search input::placeholder { color: #9A958A; }

.pkp_brand_footer img,
.pkp_structure_footer_wrapper .pkp_brand_footer img {
  filter: invert(1) brightness(1.7) grayscale(1);
  opacity: .38;
}
.pkp_brand_footer a:hover img { opacity: .7; }

/* Full-bleed bars, centred content. The page wrapper must not be capped, or
   the black nav bar and the footer band stop mid-screen. */
.pkp_structure_page { max-width: none !important; width: 100% !important; }

.pkp_head_wrapper,
.pkp_structure_footer {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* --- Release the content wrappers so bands can go full-bleed ----------------
   OJS nests all page content in .pkp_structure_content > .pkp_structure_main,
   and the Default theme gives both their own width, margins and padding. At a
   1600px viewport that leaves the inner content only ~800px wide, which traps
   full-width colour bands inside a narrow centre column — the coloured edges
   then read as vertical rules down the page. The footer escapes this because
   it sits OUTSIDE those wrappers, which is why it was the only band spanning
   the viewport before this fix.

   Applied to EVERY page, not just the index: inner pages need it too, so their
   breadcrumb and page-head bands can run edge to edge (see §14). Centring is
   handed to .sci_container on the home page and to .page on inner pages, so
   nothing inside the bands moves.                                          */
.pkp_structure_content,
.pkp_structure_main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* The Default theme paints 1px #ddd column rules down BOTH sides of
   .pkp_structure_main using ::before / ::after pseudo-elements. They are not
   borders and not DOM nodes, so they survive every border reset and are
   invisible to a `querySelectorAll` audit — which is exactly why they outlived
   the full-bleed fix above and kept framing the whole site in a grey box.
   The design has no such rules, and SCI-DOC-02 §3.1 is explicit that a rule is
   "a warm line, never a grey one", so remove them outright. */
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none !important;
}

.cmp_notification,
.pkp_structure_main .description {
  background: var(--sci-sand);
  border-left: 5px solid var(--sci-gold);
  padding: 18px 22px;
  color: var(--sci-graphite);
}

/* ============================================================================
   12. SCI HOME PAGE + UTILITY BAR  (new markup, from header.tpl / indexJournal.tpl)
   ========================================================================== */

.sci_container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* --- Utility bar --- */
.sci_utility_bar {
  background: var(--sci-black);
  min-height: 36px;
  display: flex;
  align-items: center;
}
.sci_utility_bar_inner {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.sci_utility_left {
  font-family: var(--sci-mono);
  font-size: 12px;
  color: #B8B3A4;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sci_utility_right {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.sci_utility_right .sci_utility_user,
.sci_utility_right .pkp_navigation_user {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* width:auto is required. The Default theme gives .pkp_navigation_user its
     own width for the old header layout; inside our flex utility bar that
     forced the <ul> to ~1160px for ~117px of links, pushing the Submit button
     past the viewport edge and putting a horizontal scrollbar on every page. */
  width: auto;
  flex: 0 0 auto;
  max-width: none;
}
.sci_utility_right .pkp_navigation_user > li { position: relative; }
.sci_utility_right .pkp_navigation_user a,
.sci_utility_link {
  font-family: var(--sci-sans);
  font-size: 13px;
  font-weight: 550;
  color: #D8D3C4;
  text-decoration: none;
  white-space: nowrap;
}
.sci_utility_right .pkp_navigation_user a:hover,
.sci_utility_link:hover { color: var(--sci-gold); }
.sci_utility_search { display: inline-flex; align-items: center; gap: 6px; }
.sci_utility_right .pkp_navigation_user ul {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 160px;
  z-index: 40;
}

.sci_utility_submit {
  background: var(--sci-gold);
  color: var(--sci-carbon) !important;
  font-family: var(--sci-sans);
  font-weight: 650;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.sci_utility_submit:hover { background: var(--sci-amber); color: var(--sci-carbon) !important; }

/* --- Logo --- */
.pkp_site_name_wrapper { display: flex; align-items: center; flex-wrap: wrap; }
.sci_wordmark_row { display: flex; align-items: center; }
.sci_wordmark_stack { display: flex; flex-direction: column; }
.sci_logo_shipped {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  flex: none;
}
.sci_logo_shipped img { height: 72px; width: auto; display: block; }

/* --- Logo lockup subtitle --- */
.sci_site_subtitle {
  font-family: var(--sci-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sci-bronze);
  margin-top: 2px;
}

/* --- Generic buttons used on the home page --- */
.sci_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sci-sans);
  font-weight: 650;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 2px;
  text-decoration: none;
  border: 2px solid var(--sci-carbon);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.sci_btn_primary { background: var(--sci-gold); color: var(--sci-carbon); }
.sci_btn_primary:hover { background: var(--sci-amber); color: var(--sci-carbon); }
.sci_btn_outline { background: transparent; color: var(--sci-carbon); }
.sci_btn_outline:hover { background: var(--sci-sand); }
.sci_btn_carbon_outline {
  background: transparent;
  color: var(--sci-carbon);
  border-color: var(--sci-carbon);
}
.sci_btn_carbon_outline:hover { background: rgba(26,26,24,.08); }

/* --- Hero --- */
.sci_hero { background: var(--sci-white); padding: 72px 0; border-bottom: 1px solid var(--sci-line); }
.sci_hero_inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 64px;
  align-items: center;
}
.sci_hero_rule { width: 56px; height: 5px; background: var(--sci-gold); margin-bottom: 20px; }
/* Eyebrow labels are MONOSPACE in the mockup, not sans — this is what gives
   every section its small technical kicker. */
.sci_eyebrow {
  display: block;
  font-family: var(--sci-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sci-bronze);
  margin: 0 0 10px;
}
.sci_eyebrow_on_gold { color: #5A4200; }
.sci_eyebrow_on_black { color: var(--sci-gold); }
/* Size/family come from the global `.pkp_structure_main h1` rule above; only
   the bottom margin differs, and it needs the same prefix to outrank it. */
.pkp_structure_main .sci_hero_title { margin: 0 0 18px; }
.sci_hero_intro { font-size: 21px; line-height: 1.6; color: var(--sci-graphite); max-width: 68ch; margin: 0 0 8px; }
.sci_hero_intro_muted { font-size: 18px; color: var(--sci-warm); margin-top: 14px; }
.sci_hero_actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 18px; }
.sci_hero_actions_center { justify-content: center; }
.sci_hero_status { font-size: 13.5px; color: var(--sci-warm); line-height: 1.9; }
.sci_arw { font-family: var(--sci-mono); }

/* --- Hero figure: the J-V curve (from the mockup, verbatim) --- */
.sci_jv_figure { margin: 0; }
.sci_jv_cap {
  font-family: var(--sci-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--sci-carbon);
  line-height: 1.25;
  margin-top: 14px;
}
.sci_jv_key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--sci-warm);
  margin-top: 8px;
}
.sci_jv_key span { display: inline-flex; align-items: center; gap: 8px; }
.sci_jv_swatch {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2.5px solid var(--sci-carbon);
}
.sci_jv_swatch_b { border-top-color: var(--sci-bronze); border-top-style: dashed; }
.sci_jv_sub {
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--sci-warm);
  line-height: 1.65;
  margin-top: 8px;
}

/* --- Pillars --- */
.sci_pillars { background: var(--sci-white); padding: 56px 0; }
.sci_pillar_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sci_pillar_card { padding-top: 6px; }
.sci_pillar_rule { width: 100%; height: 3px; background: var(--sci-gold); margin-bottom: 18px; }
.sci_pillar_num {
  display: block;
  font-family: var(--sci-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sci-bronze);
  margin-bottom: 14px;
}
.pkp_structure_main .sci_pillar_card h3 { margin: 0 0 10px; }
.sci_pillar_card p { font-size: 16.5px; color: var(--sci-graphite); margin: 0; }

/* --- Generic bands --- */
.sci_band { padding: 56px 0; background: var(--sci-white); }
.sci_band_sand { background: var(--sci-sand); }
.sci_band_ivory { background: var(--sci-ivory); }
.sci_band_heading { font-size: 26px; margin: 0 0 8px; }
.sci_band_lede { font-size: 16.5px; color: var(--sci-graphite); max-width: 62ch; margin: 0 0 30px; }

/* --- Recent articles / empty state --- */
.sci_article_grid .obj_issue_toc .cmp_article_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 28px;
}
.sci_article_grid .obj_article_summary { margin-bottom: 0; }
.sci_text_link { font-weight: 600; font-family: var(--sci-sans); text-decoration: none; }
.sci_text_link:hover { text-decoration: underline; }

.sci_empty_state {
  text-align: center;
  padding: 56px 44px;
  background: var(--sci-ivory);
  border: 2px dashed var(--sci-line-strong);
}
.pkp_structure_main .sci_empty_state h3 { font-size: 26px; margin: 0 0 14px; }
.sci_empty_state p {
  max-width: 56ch;
  margin: 0 auto 8px;
  font-size: 17.5px;
  color: var(--sci-graphite);
}

/* --- What we publish / scope chips --- */
.sci_scope_layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.sci_scope_intro h2 { font-size: 26px; margin: 0 0 12px; }
.sci_scope_intro p { font-size: 18.5px; color: var(--sci-graphite); margin: 0 0 22px; }
.sci_chip_row + .sci_chip_row { margin-top: 22px; }
.sci_chip_label {
  display: block;
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sci-bronze);
  margin-bottom: 10px;
}
.sci_chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips are monospace, uppercase and square-cornered in the mockup — rounded
   sans-serif pills read as a generic UI kit rather than a scientific journal. */
.sci_chip {
  display: inline-block;
  font-family: var(--sci-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--sci-line-strong);
  border-radius: 2px;
  color: var(--sci-graphite);
  background: var(--sci-white);
}
.sci_chip_gold {
  background: var(--sci-gold);
  border-color: var(--sci-gold);
  color: var(--sci-carbon);
  font-weight: 600;
}

/* --- Negative results statement band ---
   The 6px carbon rules top and bottom are what make this band land as a hard
   break in the page rather than a soft colour change. */
.sci_statement_band {
  background: var(--sci-gold);
  color: var(--sci-carbon);
  padding: 86px 0;
  border-top: 6px solid var(--sci-carbon);
  border-bottom: 6px solid var(--sci-carbon);
}
.sci_statement_grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 60px;
  align-items: center;
}
.pkp_structure_main .sci_statement_band h2 {
  font-size: clamp(30px, 3.7vw, 48px);
  color: var(--sci-carbon);
  max-width: 20ch;
  margin: 0 0 22px;
}
.sci_statement_band p {
  font-size: 18.5px;
  line-height: 1.65;
  color: #2B2718;
  max-width: 60ch;
  margin: 0 0 16px;
}
.sci_statement_band .sci_btn_carbon_outline { border-color: var(--sci-carbon); margin-top: 12px; }

.sci_dist_figure {
  margin: 0;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(26,26,24,.15);
  border-radius: 3px;
  padding: 20px 22px 16px;
}
.sci_dist_title {
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5A4200;
  margin-bottom: 16px;
}
.sci_dist_cap {
  font-family: var(--sci-mono);
  font-size: 12px;
  line-height: 1.7;
  color: #2B2718;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26,26,24,.25);
}

/* --- For authors route cards --- */
.sci_route_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.sci_route_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 172px;
  padding: 24px;
  border: 1px solid var(--sci-line);
  text-decoration: none;
  background: var(--sci-white);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sci_route_card:hover {
  border-color: var(--sci-carbon);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(26,26,24,.07);
}
.pkp_structure_main .sci_route_card h3 { margin: 0 0 8px; color: var(--sci-carbon); }
.sci_route_card p { font-size: 15.5px; color: var(--sci-warm); margin: 0; }
.sci_route_go {
  font-family: var(--sci-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--sci-bronze);
  margin-top: 18px;
}
.sci_cta_strip { margin-top: 32px; text-align: center; }
.sci_cta_strip_left { text-align: left; margin-top: 28px; }

/* --- Announcements heading (native h2 replaced by our eyebrow+h2 above it) --- */
.sci_band_lede + .cmp_announcements > h2 { display: none; }

/* --- Stay informed --- */
.sci_stay_informed { background: var(--sci-black); padding: 56px 0; }
.sci_stay_informed_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
}
.pkp_structure_main .sci_stay_informed h2 {
  color: var(--sci-white);
  font-family: var(--sci-serif);
  font-size: 30px;
  max-width: 20ch;
  margin: 0 0 12px;
}
.sci_stay_informed_lede { color: #B8B3A4; font-size: 15.5px; max-width: 48ch; margin: 0; }
.sci_stay_informed_actions { display: flex; flex-wrap: wrap; gap: 14px; flex: none; }
.sci_btn_outline_light {
  background: transparent;
  color: var(--sci-white);
  border-color: #55503F;
}
.sci_btn_outline_light:hover { background: rgba(255,255,255,.08); border-color: var(--sci-white); }

/* --- Responsive --- */
@media (max-width: 992px) {
  .pkp_head_wrapper { flex-direction: column; align-items: flex-start; }
  .sci_hero_inner { grid-template-columns: 1fr; }
  .sci_jv_figure { max-width: 480px; order: -1; }
  .sci_pillar_grid { grid-template-columns: 1fr; gap: 34px; }
  .sci_scope_layout { grid-template-columns: 1fr; }
  .sci_statement_grid { grid-template-columns: 1fr; }
  .sci_dist_figure { max-width: 480px; }
  .sci_route_grid { grid-template-columns: repeat(2, 1fr); }
  .sci_article_grid .obj_issue_toc .cmp_article_list { grid-template-columns: repeat(2, 1fr); }
  .sci_footer_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sci_utility_left { display: none; }
  .sci_route_grid { grid-template-columns: 1fr; }
  .sci_article_grid .obj_issue_toc .cmp_article_list { grid-template-columns: 1fr; }
  .sci_stay_informed_inner { flex-direction: column; align-items: flex-start; }
  .sci_stay_informed_actions { width: 100%; }
  .sci_footer_grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   13. SCI FOOTER — four columns + legal strip (from footer.tpl)
   ========================================================================== */

/* .sci_footer_grid also carries the native .pkp_structure_footer class, and the
   Default theme sets a percentage width on it (~73%), which beats a bare
   max-width and squeezed the four columns into ~1160px. Force the width so the
   footer lines up with the 1320px containers used everywhere else. */
/* text-align:left is required — the Default theme sets
   `.pkp_structure_footer { text-align: center }`, and .sci_footer_grid carries
   that same class, so without this every footer column renders centred. */
.pkp_structure_footer_wrapper .sci_footer_grid,
.pkp_structure_footer_wrapper .sci_footer_legal {
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.sci_footer_grid {
  padding: 64px 32px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  float: none !important;
}
.sci_footer_col h2 { margin: 0 0 16px; }
.sci_footer_desc { font-size: 14px; color: #B8B3A4; line-height: 1.6; margin: 0 0 16px; }
.sci_footer_col ul { list-style: none; margin: 0; padding: 0; }
.sci_footer_col li { margin-bottom: 10px; }
.sci_footer_col a { font-size: 14.5px; }
.sci_footer_pending {
  font-size: 14.5px;
  color: #6E695C;
  cursor: default;
}

.sci_footer_legal {
  padding: 22px 32px 32px;
  border-top: 1px solid #302D25;
}
.sci_footer_legal p {
  font-family: var(--sci-mono);
  font-size: 12px;
  line-height: 1.9;
  color: #98938A;
  margin: 0 0 6px;
}

/* ============================================================================
   14. INNER PAGES
   ----------------------------------------------------------------------------
   About, Aims & Scope, every policy page, Editorial Board, Contact, Privacy,
   Archive, Current Issue, Article, Search, Register, Login, Announcements —
   and every Static Page the client adds later.

   Every OJS inner page renders the same shell (live-checked in the browser —
   the breadcrumb is a SIBLING of .page, not nested inside it, correcting an
   earlier version of this comment that had it wrong):

       .pkp_structure_main
         ├ nav.cmp_breadcrumbs
         └ .page.page_<name>
             ├ h1
             └ …content

   so one set of rules styles all of them, including pages that do not exist
   yet. This mirrors the mockup's .crumb / .page-head / .prose pattern.

   The header bands are full-bleed, and their text lines up with the same
   1320px measure the home page uses. That alignment is done with

       padding-inline: max(32px, calc((100% - 1320px) / 2 + 32px))

   NOT with 100vw: 100vw includes the scrollbar, which would push a horizontal
   overflow onto every page on the site.

   The home page is unaffected — its wrapper is .page_index_journal, not .page.
   ========================================================================== */

.page { width: 100%; }

/* Breadcrumb bar. No bottom border of its own — it sits directly on top of the
   page-head band and the two read as a single ivory header block.
   NOTE: live-checked via the browser — this OJS version renders the
   breadcrumb as a direct child of .pkp_structure_main, a SIBLING of .page,
   not nested inside it as the shell diagram above assumes. The `.page >`
   selector never matched, so this whole block was dead: no width:100%, no
   background, no centering padding — the breadcrumb fell back to browser
   default inline-block sizing flush at the left edge instead of lining up
   with the logo/page-head band above and below it. */
.pkp_structure_main > .cmp_breadcrumbs {
  /* The Default theme sets this to inline-block, which collapses the bar to
     the width of its text instead of spanning the page. */
  display: block;
  width: 100%;
  background: var(--sci-ivory);
  margin: 0;
  padding: 14px max(32px, calc((100% - 1320px) / 2 + 32px)) 0;
  font-family: var(--sci-mono);
  font-size: 12.5px;
  color: var(--sci-warm);
}
.pkp_structure_main > .cmp_breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.pkp_structure_main > .cmp_breadcrumbs li { display: inline-flex; align-items: baseline; }
.pkp_structure_main > .cmp_breadcrumbs a { color: var(--sci-bronze); text-decoration: none; }
.pkp_structure_main > .cmp_breadcrumbs a:hover { text-decoration: underline; }
.pkp_structure_main > .cmp_breadcrumbs .separator { color: var(--sci-line-strong); padding: 0 9px; }
.pkp_structure_main > .cmp_breadcrumbs .current span { color: var(--sci-warm); }

/* Page head — the ivory band carrying the page title.
   Applies to two different situations:
     .page > h1        — pages with a native handler (About, Archive, Search,
                          Login, ...), which render a breadcrumb + <h1>.
     .page > h2:first-child — Static Pages, which render NEITHER a breadcrumb
                          NOR an <h1>. Confirmed against the plugin's own
                          content.tpl: it emits `<div class="page"><h2>{title}
                          </h2>{content}</div>` — nothing else. Every one of
                          the 23 drafted static pages hits this path, and
                          without this rule the page's own title is
                          indistinguishable from its first section heading,
                          both rendering as identical plain h2s. */
.page > h1,
.page > h2:first-child {
  background: var(--sci-ivory);
  border-bottom: 1px solid var(--sci-line);
  margin: 0 0 48px;
  padding: 28px max(32px, calc((100% - 1320px) / 2 + 32px)) 52px;
  max-width: none;
}
.pkp_structure_main .page > h2:first-child {
  font-size: clamp(38px, 4.6vw, 60px);
}
/* When a page has no breadcrumb above it the band needs its own top padding.
   Static Pages never have a breadcrumb, so their title always gets this. */
.page > h1:first-child,
.page > h2:first-child { padding-top: 56px; }

/* Everything after the header bands returns to the 1320px measure. */
.page > *:not(.cmp_breadcrumbs):not(h1):not(h2:first-child) {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}
.page { padding-bottom: 72px; }

/* --- Prose ---------------------------------------------------------------
   Static Pages emit plain HTML into .page, so these are the defaults that
   content will land in. Reading measure per the mockup's --measure (74ch). */
.page p, .page ul, .page ol, .page dl, .page blockquote {
  font-size: 18.5px;
  line-height: 1.75;
  max-width: 74ch;
}
.pkp_structure_main .page h2 { margin: 52px 0 14px; font-size: 29px; }
.pkp_structure_main .page h3 { margin: 34px 0 10px; font-size: 20px; }
.page ul, .page ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.page li { margin-bottom: .5em; }
.page li::marker { color: var(--sci-bronze); }
.page strong { color: var(--sci-carbon); font-weight: 650; }

/* --- Tables (Aims & Scope, Article Types, policy pages) ------------------- */
.page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin: 24px 0;
  max-width: none;
}
.page table caption {
  text-align: left;
  font-family: var(--sci-mono);
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sci-warm);
  padding-bottom: 10px;
}
.page th {
  background: var(--sci-gold);
  color: var(--sci-carbon);
  text-align: left;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 650;
  border-bottom: 2px solid var(--sci-carbon);
}
.page td { padding: 13px 16px; border-bottom: 1px solid var(--sci-line); vertical-align: top; }
.page tbody tr:nth-child(even) td { background: var(--sci-ivory); }

/* --- Notifications / empty states ----------------------------------------
   OJS uses .cmp_notification for "No Current Issue", "no search results" and
   similar. Styled as the mockup's callout so those states look designed
   rather than like an error. */
.page .cmp_notification {
  background: var(--sci-sand);
  border: 0;
  border-left: 5px solid var(--sci-gold);
  padding: 22px 26px;
  margin: 26px 0;
  font-size: 17.5px;
  color: var(--sci-graphite);
  max-width: 74ch;
}

/* --- Issue archive -------------------------------------------------------- */
.obj_issue_summary {
  border-top: 3px solid var(--sci-carbon);
  padding-top: 18px;
  margin-bottom: 30px;
}
.obj_issue_summary .title {
  font-family: var(--sci-serif);
  font-size: 21px;
  font-weight: 600;
}
.obj_issue_summary .title a { color: var(--sci-carbon); text-decoration: none; }
.obj_issue_summary .title a:hover { color: var(--sci-bronze); text-decoration: underline; }
.obj_issue_summary .series,
.obj_issue_summary .published {
  font-family: var(--sci-mono);
  font-size: 12px;
  color: var(--sci-warm);
}

/* --- Article landing page ------------------------------------------------- */
.obj_article_details .authors { font-size: 18px; color: var(--sci-graphite); }
.obj_article_details .item .label {
  font-family: var(--sci-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sci-bronze);
}
.obj_article_details .abstract { max-width: 74ch; }
.obj_article_details .item { margin-bottom: 26px; }

/* --- Forms (Register, Login, Search, Contact) -----------------------------
   Inputs are capped: the content column is 1320px wide, and an unconstrained
   text field stretches the full width of it, which looks broken and is hard
   to scan.

   Border/padding/font are repeated here rather than relying on section 9's
   generic `input[type="text"]` rule, because OJS ships its own
   `.cmp_form input[type="text"]` rule at specificity (0,2,0), which beats a
   bare element+attribute selector (0,1,0) — the generic rule was silently
   losing on every OJS-native form (Register, Login, Search, Contact) and
   inputs were rendering as unstyled 1px grey boxes. `.page .cmp_form ...`
   is (0,3,0), so it wins outright without needing !important. Same story for
   the submit button: OJS's class is `.submit`, not `.submitFormButton`. */
.page .cmp_form .fields > .label,
.page .cmp_form label { font-weight: 600; color: var(--sci-carbon); }
.page .cmp_form .description { font-size: 15px; color: var(--sci-warm); }
.page .cmp_form input[type="text"],
.page .cmp_form input[type="search"],
.page .cmp_form input[type="email"],
.page .cmp_form input[type="password"],
.page .cmp_form input[type="url"],
.page .cmp_form select,
.page .cmp_form textarea {
  width: 100%;
  max-width: 520px;
  border: 2px solid var(--sci-carbon);
  border-radius: 2px;
  font-family: var(--sci-sans);
  font-size: 16px;
  padding: 10px 14px;
  background: var(--sci-white);
  color: var(--sci-graphite);
}
.page .cmp_form textarea { max-width: 74ch; }
.page .cmp_form input:focus,
.page .cmp_form select:focus,
.page .cmp_form textarea:focus {
  outline: 3px solid var(--sci-gold);
  outline-offset: 1px;
}
.page .cmp_form button[type="submit"],
.page .cmp_form button.submit {
  background: var(--sci-gold) !important;
  color: var(--sci-carbon) !important;
  border: 2px solid var(--sci-carbon) !important;
  font-family: var(--sci-sans);
  font-weight: 650;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 2px;
  cursor: pointer;
}
.page .cmp_form button[type="submit"]:hover,
.page .cmp_form button.submit:hover { background: var(--sci-amber) !important; }
.page .cmp_form input[type="checkbox"],
.page .cmp_form input[type="radio"] { accent-color: var(--sci-carbon); width: 16px; height: 16px; }

/* --- Search --------------------------------------------------------------- */
.page_search .search_results { margin-top: 8px; }
.page_search .cmp_form { margin-bottom: 32px; }

/* ============================================================================
   15. CONTENT COMPONENTS FOR STATIC PAGES
   ----------------------------------------------------------------------------
   OJS Static Pages take raw HTML. These are the classes to write into that
   HTML so policy pages, the editorial board page, and the author-facing pages
   use the same components as the mockup instead of falling back to plain
   paragraphs. Values copied from the mockup's .callout / .blank / .checklist /
   .person / .steps / details.faq / .cta rules.
   ========================================================================== */

/* Callout — a statement that must not be missed (used throughout the policy
   pages: "papers are not rejected for X", COPE statements, etc). */
.sci_callout {
  background: var(--sci-sand);
  border-left: 5px solid var(--sci-gold);
  padding: 22px 26px;
  margin: 26px 0;
  font-size: 17.5px;
  max-width: 74ch;
}
.sci_callout p:last-child { margin-bottom: 0; }
.sci_callout--carbon {
  background: var(--sci-black);
  border-left-color: var(--sci-gold);
  color: #E8E4D8;
}
.sci_callout--carbon strong { color: var(--sci-gold); }

/* Blank — an unresolved decision or a client-supplied fact, flagged inline
   rather than invented. Same convention as the LOGO/ISSN placeholders. */
.sci_blank {
  background: #FBEDE6;
  border: 1px dashed #C97A55;
  padding: 18px 22px;
  margin: 26px 0;
  font-size: 16px;
  color: #6B2A10;
  max-width: 74ch;
}
.sci_blank b {
  font-family: var(--sci-mono);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px;
  color: #92310C;
}

/* Checklist — the submission checklist, manuscript-prep requirements, etc. */
.sci_checklist {
  border: 1px solid var(--sci-line);
  background: var(--sci-white);
  padding: 8px 0;
  margin: 24px 0;
  list-style: none;
  max-width: 74ch;
}
.sci_checklist li {
  display: flex;
  gap: 14px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--sci-line);
  font-size: 16.5px;
  align-items: flex-start;
}
.sci_checklist li:last-child { border-bottom: 0; }
.sci_checklist li::before {
  content: "\2713";
  font-family: var(--sci-mono);
  font-weight: 700;
  color: var(--sci-bronze);
  flex: none;
  line-height: 1.55;
}

/* Person card — Editorial Board. --tbc (to be confirmed) is the dashed
   placeholder state: use it for every seat until a real name is supplied, per
   SCI-DOC-02 §11.4 ("clearly marked placeholder cards ... no risk of a
   placeholder name reaching a live site"). Never fill these with invented
   names. */
.sci_person_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
.sci_person {
  border: 1px solid var(--sci-line);
  padding: 22px;
  background: var(--sci-white);
}
.sci_person .sci_person_name { font-family: var(--sci-serif); font-size: 19px; font-weight: 600; color: var(--sci-carbon); }
.sci_person .sci_person_role {
  font-family: var(--sci-mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sci-bronze);
  margin: 8px 0 10px;
}
.sci_person .sci_person_affiliation { font-size: 15px; color: var(--sci-warm); line-height: 1.55; }
.sci_person--tbc { border-style: dashed; border-color: var(--sci-line-strong); background: var(--sci-ivory); }
.sci_person--tbc .sci_person_name { color: #A89C7E; }

/* Steps — "How we work" 4-step process (About page). */
.sci_steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--sci-line);
  margin: 28px 0;
  max-width: none;
}
.sci_step { padding: 24px; border-right: 1px solid var(--sci-line); }
.sci_step:last-child { border-right: 0; }
.sci_step .sci_step_num {
  font-family: var(--sci-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--sci-bronze);
  display: block;
  margin-bottom: 10px;
}
.sci_step h4 { margin-bottom: 6px; }
.sci_step p { font-size: 15px; color: var(--sci-warm); margin: 0; }

/* FAQ accordion. */
details.sci_faq { border-bottom: 1px solid var(--sci-line); max-width: 74ch; }
details.sci_faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--sci-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--sci-carbon);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
details.sci_faq summary::-webkit-details-marker { display: none; }
details.sci_faq summary::after { content: "+"; font-family: var(--sci-mono); color: var(--sci-bronze); font-size: 20px; }
details.sci_faq[open] summary::after { content: "\2013"; }
details.sci_faq .sci_faq_answer { padding: 0 0 20px; font-size: 17px; max-width: 70ch; }

/* CTA strip — closes most inner pages, per SCI-DOC-02 component library. */
.sci_inner_cta {
  background: var(--sci-sand);
  border-top: 5px solid var(--sci-gold);
  padding: 52px max(32px, calc((100% - 1320px) / 2 + 32px));
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  max-width: none;
}
.pkp_structure_main .sci_inner_cta h2 { font-size: 30px; max-width: 20ch; margin: 0; }
.sci_inner_cta p { margin: 8px 0 0; color: var(--sci-warm); font-size: 16.5px; max-width: 52ch; }

/* Sticky table-of-contents sidebar for long policy pages. */
.sci_toc_layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; max-width: 1080px; }
.sci_toc { position: sticky; top: 118px; border-left: 3px solid var(--sci-gold); padding-left: 18px; }
.sci_toc_title {
  font-family: var(--sci-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sci-warm);
  margin-bottom: 12px;
}
.sci_toc a { display: block; font-size: 14.5px; color: var(--sci-graphite); text-decoration: none; padding: 5px 0; line-height: 1.4; }
.sci_toc a:hover { color: var(--sci-bronze); text-decoration: underline; }

@media (max-width: 992px) {
  .sci_person_grid { grid-template-columns: repeat(2, 1fr); }
  .sci_steps { grid-template-columns: repeat(2, 1fr); }
  .sci_step { border-bottom: 1px solid var(--sci-line); }
  .sci_toc_layout { grid-template-columns: 1fr; }
  .sci_toc { position: static; border-left: none; border-top: 3px solid var(--sci-gold); padding: 14px 0 0; }
}
@media (max-width: 640px) {
  .page > h1, .page > h2:first-child { padding-top: 32px; padding-bottom: 32px; margin-bottom: 32px; }
  .page p, .page ul, .page ol { font-size: 17px; }
  .sci_person_grid { grid-template-columns: 1fr; }
  .sci_steps { grid-template-columns: 1fr; }
  .sci_inner_cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   FONTS — self-hosted, see Section 0 above
   ----------------------------------------------------------------------------
   Source Serif 4, Inter and IBM Plex Mono are vendored as .woff2 files under
   styles/fonts/ (Latin + Latin-Extended subsets, SIL OFL 1.1 licence) and
   served from this domain via the @font-face rules at the top of this file.
   Do NOT add an @import from fonts.googleapis.com — loading fonts from
   Google at runtime transmits reader IP addresses to a third party, which is
   a real GDPR problem for a German publisher. That is the whole reason these
   are bundled here instead.
   ========================================================================== */