/* ==========================================================================
   Eldenhall Press — Main Stylesheet
   Design System: GOV.UK Design System patterns
   Brand Palette: US Flag Colors
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&family=Spectral:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --color-brand: #002868;        /* US-flag navy (primary) */
  --color-brand-dark: #001a4d;
  --color-brand-light: #e8f0f8;
  --color-parchment: #f7f4ee;    /* warm neutral for premium sections */
  --journal-cortexa: #362a5e;    /* deep indigo */
  --journal-vitalis: #0B5563;    /* deep teal (Computational Diagnostics) */
  --teal-mid: #12808F;
  --teal-tint: #F1F7F8;
  --teal-rule: #C6D6D9;
  --color-red: #BF0A30;
  --color-red-dark: #8a0722;
  --color-green: #007f3b;
  --color-green-light: #eaf6f0;
  --color-yellow: #ffdd00;
  --color-alert: #BF0A30;
  --color-black: #0b0c0c;
  --color-white: #ffffff;
  --color-light-grey: #f3f2f1;
  --color-mid-grey: #505a5f;
  --text-colour: #0b0c0c;
  --secondary-text-colour: #505a5f;
  --border-colour: #b1b4b6;
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Spectral", Georgia, "Times New Roman", "Times", serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-wordmark: "Cinzel", "Playfair Display", Georgia, serif;
  --font-size-base: 19px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
  --font-size-xxl: 48px;
  --font-size-sm: 16px;
  --line-height: 1.5;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;
  --space-8: 40px;
  --space-10: 50px;
  --space-12: 60px;
  --max-width: 1120px;
  --gutter: 30px;
  --header-height: 60px;
  --focus-outline: 3px solid #ffdd00;
  --focus-offset: 2px;
  --radius: 0;
  --radius-sm: 0;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-colour);
  background-color: var(--color-white);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand); text-decoration: none; cursor: pointer; }
/* Underline only inline text links inside prose, where it aids affordance */
.policy-body p a, .policy-body li a, .article-body p a, .article-body li a,
.content-prose a, .a-corr a, .prose a { text-decoration: underline; text-underline-offset: 2px; }
.policy-body p a:hover, .article-body p a:hover { text-decoration: none; }
a:visited { color: var(--color-brand-dark); }
a:hover { color: var(--color-red); }
a:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  background-color: var(--color-yellow);
  color: var(--text-colour);
  text-decoration: none;
}
ul, ol { list-style: none; padding-left: 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text-colour);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1, h2 { font-family: var(--font-display); letter-spacing: -0.005em; }
h1 { font-size: var(--font-size-xxl); font-weight: 800; }
h4, h5, h6 { font-family: var(--font-family); font-weight: 700; }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-base); }
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. Typography Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   4. Visually Hidden
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   5. Skip Link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 10000;
  background: var(--color-yellow);
  color: var(--text-colour);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--text-colour);
}
.skip-link:focus {
  top: 0;
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Grid System */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-3));
}
.grid > * { padding: 0 var(--space-3); flex: 1 1 100%; }
.grid--2 > * { flex: 1 1 calc(50% - var(--space-6)); max-width: calc(50% - var(--space-6)); }
.grid--3 > * { flex: 1 1 calc(33.333% - var(--space-6)); max-width: calc(33.333% - var(--space-6)); }
.grid--4 > * { flex: 1 1 calc(25% - var(--space-6)); max-width: calc(25% - var(--space-6)); }
.grid--2-1 > *:first-child { flex: 2 1 calc(66.666% - var(--space-6)); max-width: calc(66.666% - var(--space-6)); }
.grid--2-1 > *:last-child { flex: 1 1 calc(33.333% - var(--space-6)); max-width: calc(33.333% - var(--space-6)); }
.grid--3-1 > *:first-child { flex: 3 1 calc(75% - var(--space-6)); max-width: calc(75% - var(--space-6)); }
.grid--3-1 > *:last-child { flex: 1 1 calc(25% - var(--space-6)); max-width: calc(25% - var(--space-6)); }

.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* --------------------------------------------------------------------------
   7. Header Bar — GOV.UK style black bar with logo + nav
   -------------------------------------------------------------------------- */
.header-bar {
  background-color: var(--color-black);
  border-bottom: 10px solid var(--color-brand);
  padding: 0 var(--gutter);
  position: relative;
}

.header-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}

.header-bar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.header-bar__logo-mark {
  width: 40px;
  height: 40px;
  background-color: var(--color-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.header-bar__logo-text {
  display: flex;
  flex-direction: column;
}

.header-bar__logo-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  text-decoration: none;
}

.header-bar__logo-name:hover { color: var(--color-yellow); }

.header-bar__logo-tagline {
  font-size: 14px;
  color: #b1b4b6;
  line-height: 1.3;
}

/* Main navigation — sits on its own full-width row below the logo
   masthead (GOV.UK service-header pattern). Because it no longer competes
   with the logo for horizontal space, all items fit on one line on desktop
   and wrap gracefully on narrower widths instead of overflowing. */
.header-bar__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  flex-basis: 100%;
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid #2c2c2c;
}

.header-bar__nav a {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 12px;
  display: inline-block;
  white-space: nowrap;
  border-bottom: 4px solid transparent;
}

.header-bar__nav a:visited { color: var(--color-white); }

.header-bar__nav a:hover,
.header-bar__nav a:focus {
  color: var(--color-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Current-page indicator in the primary nav */
.header-bar__nav a[aria-current="page"] {
  color: var(--color-white);
  border-bottom-color: var(--color-yellow);
}

.header-bar__nav .btn--submit {
  background-color: var(--color-red);
  color: var(--color-white);
  padding: 8px 16px;
  margin-left: auto;
  border: none;
  border-bottom: none;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.header-bar__nav .btn--submit:hover {
  background-color: var(--color-red-dark);
  color: var(--color-white);
  text-decoration: none;
}

.header-bar__nav .btn--submit:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Mobile toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-white);
  color: var(--color-white);
  font-size: 24px;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font-family);
}

/* Render the three <span> elements as an actual hamburger icon
   (previously unstyled, so the toggle showed as an empty box). */
.mobile-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  margin: 4px 0;
  background-color: currentColor;
}

.mobile-toggle:hover,
.mobile-toggle:focus {
  background-color: var(--color-yellow);
  color: var(--text-colour);
  border-color: var(--color-yellow);
}

/* --------------------------------------------------------------------------
   8. Phase Banner
   -------------------------------------------------------------------------- */
.phase-banner {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-colour);
  background-color: var(--color-light-grey);
}

.phase-banner__content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.phase-banner__tag {
  display: inline-block;
  background-color: var(--color-green);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  line-height: 1.2;
}

.phase-banner__text {
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
}

/* --------------------------------------------------------------------------
   9. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
}

.breadcrumbs ul,
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  list-style: none;
  padding: 0;
}

.breadcrumbs li { display: inline-flex; align-items: center; }

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  color: var(--secondary-text-colour);
  margin: 0 var(--space-1);
}

.breadcrumbs a {
  color: var(--color-brand);
  text-decoration: none;
}

.breadcrumbs a:hover { text-decoration: underline; }

.breadcrumbs [aria-current="page"] {
  color: var(--text-colour);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. Back Link
   -------------------------------------------------------------------------- */
.back-link {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-brand);
  text-decoration: none;
  margin-bottom: var(--space-4);
  padding: var(--space-1) 0;
}
.back-link::before { content: "‹ "; font-size: 1.2em; }
.back-link:hover { color: var(--color-red); text-decoration: underline; }

/* ==========================================================================
   PAGE CONTENT
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. Hero — GOV.UK-style dark blue banner
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--color-brand);
  background-image:
    radial-gradient(120% 80% at 85% -10%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, #002d76 0%, var(--color-brand) 55%, #00224f 100%);
  padding: var(--space-12) 0;
  position: relative;
  overflow: hidden;
}

/* Large faded crest watermark for depth */
.hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M6 31 L11 14 L17.5 24 L24 9 L30.5 24 L37 14 L42 31 Z'/%3E%3Crect x='6' y='34' width='36' height='6.5' rx='2'/%3E%3Ccircle cx='11' cy='11.5' r='2.6'/%3E%3Ccircle cx='24' cy='6.5' r='3'/%3E%3Ccircle cx='37' cy='11.5' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* Prominent hero search — GOV.UK-style box: white field + square magnifier button */
.hero__search {
  display: flex;
  max-width: 620px;
  margin-bottom: var(--space-6);
  border: 2px solid var(--color-white);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.hero__search-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: 14px var(--space-4);
  border: 0;
  background: var(--color-white);
  color: var(--text-colour);
}
.hero__search-input::placeholder { color: #6a737b; }
.hero__search-input:focus { outline: var(--focus-outline); outline-offset: -2px; z-index: 1; }
.hero__search-btn {
  flex-shrink: 0;
  width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand);
  color: var(--color-white);
  border: 0;
  border-left: 2px solid var(--color-white);
  cursor: pointer;
}
.hero__search-btn svg { width: 24px; height: 24px; display: block; }
.hero__search-btn:hover { background: var(--color-brand-dark); }
.hero__search-btn:focus { outline: var(--focus-outline); outline-offset: -2px; }

.hero__title {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 800;
  margin-bottom: var(--space-4);
  max-width: 15ch;
  color: var(--color-white);
  line-height: 1.06;
  letter-spacing: -0.005em;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0;
}
/* Disable awkward Playfair ligatures (e.g. the "fi" in Artificial) on big display headings */
.journal-hero__title, .a-title, .policy-hero h1, .masthead__journal {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0;
}

.hero__lead {
  font-size: 19px;
  color: #d1e4f7;
  margin-bottom: var(--space-8);
  max-width: 800px;
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero__service-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero__service-name span {
  color: #cdd9ea;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   12. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  padding: 8px 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 2px 0 var(--text-colour);
  border-radius: var(--radius);
}

.btn:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  background-color: var(--color-yellow);
  color: var(--text-colour);
  box-shadow: none;
}

.btn:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-white);
}

/* Keep visited link colour matched to each variant so text never turns
   white-on-white (or dark-on-dark) after a page has been visited. */
.btn--primary:visited,
.btn--start:visited,
.btn--submit:visited,
.btn--warning:visited { color: var(--color-white); }
.btn--secondary:visited { color: var(--text-colour); }
.btn--reverse:visited { color: var(--color-brand); }

.btn--primary {
  background-color: var(--color-brand);
  color: var(--color-white);
  border-color: var(--color-brand);
}

.btn--secondary {
  background-color: var(--color-white);
  color: var(--text-colour);
  border-color: var(--text-colour);
  box-shadow: 0 2px 0 var(--text-colour);
}

.btn--secondary:hover {
  background-color: var(--color-light-grey);
  color: var(--text-colour);
  border-color: var(--text-colour);
}

.btn--secondary:focus {
  background-color: var(--color-yellow);
  color: var(--text-colour);
}

.btn--reverse {
  background-color: var(--color-white);
  color: var(--color-brand);
  border-color: var(--color-white);
  box-shadow: 0 2px 0 var(--text-colour);
}

.btn--reverse:hover {
  background-color: var(--color-light-grey);
  color: var(--color-brand);
}

.btn--lg { font-size: var(--font-size-lg); padding: 12px 24px; }
.btn--sm { font-size: var(--font-size-sm); padding: 6px 12px; }

.btn--start {
  background-color: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
  box-shadow: 0 2px 0 var(--color-red-dark);
}

.btn--start:hover {
  background-color: var(--color-red-dark);
  border-color: var(--color-red-dark);
  color: var(--color-white);
}

.btn--submit {
  background-color: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
  box-shadow: 0 2px 0 #005a2b;
}

.btn--submit:hover {
  background-color: #005a2b;
  border-color: #005a2b;
  color: var(--color-white);
}

.btn--warning {
  background-color: var(--color-alert);
  color: var(--color-white);
  border-color: var(--color-alert);
  box-shadow: 0 2px 0 #8b1a25;
}

.btn--warning:hover {
  background-color: #8b1a25;
  border-color: #8b1a25;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   13. Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--space-8) 0; }
.section--tight { padding: var(--space-4) 0; }
.section--dark {
  background-color: var(--color-light-grey);
  border-top: 1px solid var(--border-colour);
  border-bottom: 1px solid var(--border-colour);
}
.section__header { margin-bottom: var(--space-6); }
.section__heading { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-2); }
.section__subheading { font-size: var(--font-size-lg); color: var(--secondary-text-colour); }

/* --------------------------------------------------------------------------
   14. Buttons Row
   -------------------------------------------------------------------------- */
.buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.buttons-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   15. Page Strip
   -------------------------------------------------------------------------- */
.page-strip {
  background-color: var(--color-brand);
  color: var(--color-white);
  padding: var(--space-6) 0 var(--space-8);
}
/* Breadcrumbs sit on the navy strip: keep them compact and legible */
.page-strip .breadcrumbs { padding-top: 0; padding-bottom: var(--space-4); }
.page-strip .breadcrumbs li:not(:last-child)::after { color: #9fb3d1; }
.page-strip__heading { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-3); color: var(--color-white); }
.page-strip__text { font-size: var(--font-size-base); color: #d1e4f7; max-width: 700px; }

/* Ensure ALL text sitting on the blue strip is white/legible, even when the
   markup uses plain <h1>/<p> and breadcrumbs (which default to dark colours). */
.page-strip h1,
.page-strip h2,
.page-strip h3 { color: var(--color-white); }
.page-strip p { color: #d1e4f7; }
.page-strip .breadcrumbs a { color: var(--color-white); text-decoration: underline; }
.page-strip .breadcrumbs a:hover { color: var(--color-yellow); }
.page-strip .breadcrumbs a:focus { color: var(--text-colour); }
.page-strip .breadcrumbs [aria-current="page"] { color: #d1e4f7; }
.page-strip .breadcrumbs li:not(:last-child)::after { color: #cdd9ea; }

/* --------------------------------------------------------------------------
   16. Feature Strip
   -------------------------------------------------------------------------- */
.feature-strip { padding: var(--space-8) 0; }
.feature-strip--brand {
  background-color: var(--color-brand);
  color: var(--color-white);
}
.feature-strip--brand .feature-strip__heading { color: var(--color-white); }
.feature-strip--brand .feature-strip__text { color: #d1e4f7; }
.feature-strip__heading { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-3); }
.feature-strip__text { font-size: var(--font-size-base); color: var(--secondary-text-colour); max-width: 700px; }

/* --------------------------------------------------------------------------
   17. Principle Grid
   -------------------------------------------------------------------------- */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}
.principle-box {
  padding: var(--space-5);
  border: 1px solid var(--border-colour);
  background-color: var(--color-white);
}
.principle-box__number {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1;
  margin-bottom: var(--space-3);
}
.principle-box__title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-2); }
.principle-box__desc { font-size: var(--font-size-base); color: var(--secondary-text-colour); }

/* --------------------------------------------------------------------------
   18. Trust Strip
   -------------------------------------------------------------------------- */
.trust-strip {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-colour);
  border-bottom: 1px solid var(--border-colour);
  background-color: var(--color-light-grey);
}
.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}
.trust-strip__item {
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   19. Cards — clean links, no unnecessary underline
   -------------------------------------------------------------------------- */
.card {
  padding: var(--space-5);
  border: 1px solid var(--border-colour);
  background-color: var(--color-white);
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--text-colour);
}

.card__text {
  font-size: var(--font-size-base);
  color: var(--secondary-text-colour);
  margin-bottom: var(--space-3);
}

.card__link {
  font-weight: 700;
  color: var(--color-brand);
  text-decoration: none;
}

.card:hover .card__title {
  color: var(--color-brand);
}

.card:hover .card__link {
  color: var(--color-red);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   20. Journal Cards
   -------------------------------------------------------------------------- */
.journal-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--border-colour);
  background-color: var(--color-white);
  height: 100%;
}
.journal-card__logo {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
  border-radius: 50%;
  color: var(--color-white);
  flex-shrink: 0;
}
.journal-card__logo--meridian { background-color: var(--color-brand); }
.journal-card__logo--cortexa { background-color: #4a2c7f; }
.journal-card__logo--vitalis { background-color: var(--color-green); }
.journal-card__title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-1); }
.journal-card__subtitle { font-size: var(--font-size-sm); color: var(--secondary-text-colour); margin-bottom: var(--space-2); font-style: italic; }
.journal-card__desc { font-size: var(--font-size-base); color: var(--secondary-text-colour); margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   21. Status Badge
   -------------------------------------------------------------------------- */
.status-badge {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 2px var(--space-3);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.status-badge--green { background-color: #eaf6f0; color: var(--color-green); border: 1px solid var(--color-green); }
.status-badge--amber { background-color: #fff3bf; color: #b8860b; border: 1px solid #b8860b; }

/* --------------------------------------------------------------------------
   22. Notices & Panels
   -------------------------------------------------------------------------- */
.notice {
  border-left: 5px solid var(--color-brand);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background-color: var(--color-light-grey);
}
.notice--attention { border-left-color: var(--color-alert); background-color: #fef3f2; }
.notice--success { border-left-color: var(--color-green); background-color: #eaf6f0; }
.notice--error { border-left-color: var(--color-alert); background-color: #fef3f2; }
.notice--info { border-left-color: var(--color-brand); background-color: var(--color-brand-light); }
.panel {
  padding: var(--space-5);
  border: 1px solid var(--border-colour);
  background-color: var(--color-light-grey);
  margin-bottom: var(--space-4);
}
.panel--branded { border-left: 5px solid var(--color-brand); }

/* --------------------------------------------------------------------------
   23. Details / Summary
   -------------------------------------------------------------------------- */
/* Clean line-separated accordion (GOV.UK style), used for FAQ etc. */
details {
  border: 0;
  border-top: 1px solid var(--border-colour);
  margin: 0;
  background: transparent;
}
details:last-of-type { border-bottom: 1px solid var(--border-colour); }
summary {
  position: relative;
  padding: 18px 48px 18px 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  color: var(--color-brand);
  transition: color 0.12s ease;
}
summary:hover { color: var(--color-red); }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 22px;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
  transition: transform 0.15s ease;
}
details[open] summary::after { transform: rotate(45deg); }
details[open] summary { color: var(--text-colour); }
.details-content { padding: 0 48px var(--space-5) 0; color: var(--secondary-text-colour); font-size: var(--font-size-base); line-height: 1.6; }
.details-content p { margin: 0; }

/* ==========================================================================
   TIMELINE & PROCESS — Redesigned
   ========================================================================== */

/* --------------------------------------------------------------------------
   24. Review Timeline
   -------------------------------------------------------------------------- */
/* Markup: <ol class="review-timeline"><li><span/div.review-timeline__step>N</>
   <div.review-timeline__content><h4/><p/></div></li></ol> */
.review-timeline {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.review-timeline li {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
/* Vertical connector behind the number badges */
.review-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: -2px;
  width: 2px;
  background-color: var(--border-colour);
}
.review-timeline__step {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-brand);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-timeline__content { padding-top: 6px; }
.review-timeline__content h4 {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.review-timeline__content p { margin: 0; color: var(--secondary-text-colour); }
.review-timeline__content strong { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.review-timeline__content span { font-size: var(--font-size-sm); color: var(--secondary-text-colour); }

/* --------------------------------------------------------------------------
   25. Process Steps — "How the process works" on homepage
   -------------------------------------------------------------------------- */
/* Connected horizontal timeline: numbered nodes on a single rule */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.process-step {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
}

.process-step__number {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  background-color: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--color-white);
}

/* The connecting rule runs through the centre of the number circles */
.process-step:not(:last-child) .process-step__number::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(var(--space-6) + 100% * 0);
  height: 2px;
  background-color: var(--border-colour);
  transform: translateY(-50%);
  /* stretch across the grid gap to the next node */
  width: calc(var(--space-6) + 100%);
  z-index: -1;
}

.process-step__meta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-red);
  margin-bottom: var(--space-1);
}

.process-step__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.process-step__text {
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
  line-height: 1.55;
}

.process-note {
  font-size: var(--font-size-base);
  color: var(--secondary-text-colour);
  max-width: 760px;
}

@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); }
  .process-step:nth-child(2n) .process-step__number::after { display: none; }
}
@media (max-width: 560px) {
  .process-steps { grid-template-columns: 1fr; gap: var(--space-5); }
  .process-step .process-step__number::after { display: none; }
}

/* --------------------------------------------------------------------------
   26. Requirement List
   -------------------------------------------------------------------------- */
.requirement-list { margin-bottom: var(--space-4); }
.requirement-list li {
  padding: var(--space-2) 0;
  padding-left: var(--space-8);
  position: relative;
}
.requirement-list__check {
  position: absolute;
  left: 0;
  top: var(--space-2);
  color: var(--color-green);
  font-size: 20px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   27. Forms
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-5); }
.form-label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.form-label--small { font-size: var(--font-size-sm); font-weight: 400; }
.form-hint {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
  margin-bottom: var(--space-2);
}
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.25;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--text-colour);
  border-radius: var(--radius);
  color: var(--text-colour);
  background-color: var(--color-white);
  transition: border-color 0.15s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-color: var(--color-brand);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-error { border-color: var(--color-red) !important; }
.form-error-message {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-alert);
  margin-top: var(--space-1);
}
.form-success-message { color: var(--color-green); font-weight: 700; }
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.form-checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   28. Search Bar
   -------------------------------------------------------------------------- */
.search-bar {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
}
.search-bar__icon { display: none; }
.search-bar__input {
  flex: 1;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--text-colour);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  color: var(--text-colour);
}
.search-bar__input:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  z-index: 1;
}
.search-bar__btn {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-brand);
  color: var(--color-white);
  border: 2px solid var(--color-brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  white-space: nowrap;
}
.search-bar__btn:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* --------------------------------------------------------------------------
   29. Publisher Info & Contact Card
   -------------------------------------------------------------------------- */
.publisher-info { margin-bottom: var(--space-5); }
.publisher-info__row {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-colour);
}
.publisher-info__row:last-child { border-bottom: none; }
.publisher-info__label { font-weight: 700; width: 180px; flex-shrink: 0; }
.publisher-info__value { flex: 1; }
.contact-card {
  padding: var(--space-5);
  border: 1px solid var(--border-colour);
  background-color: var(--color-light-grey);
}
.contact-card__email { font-size: var(--font-size-lg); font-weight: 700; }

/* --------------------------------------------------------------------------
   30. Policy List
   -------------------------------------------------------------------------- */
.policy-list { margin-bottom: var(--space-5); }
.policy-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-colour); }
.policy-list li:last-child { border-bottom: none; }
.policy-list__desc { font-size: var(--font-size-sm); color: var(--secondary-text-colour); margin-top: var(--space-1); }

/* --------------------------------------------------------------------------
   31. Board Grid
   -------------------------------------------------------------------------- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
}
.board-member {
  padding: var(--space-4);
  border: 1px solid var(--border-colour);
  background-color: var(--color-white);
}
.board-member__name { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-1); }
.board-member__role { font-size: var(--font-size-sm); color: var(--secondary-text-colour); font-weight: 700; margin-bottom: var(--space-1); }
.board-member__affiliation { font-size: var(--font-size-sm); color: var(--secondary-text-colour); }

/* --------------------------------------------------------------------------
   32. Journal Meta & Nav
   -------------------------------------------------------------------------- */
.journal-meta {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: var(--space-6);
}
.journal-nav {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: var(--space-6);
}
.journal-nav a {
  font-weight: 700;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   33. Article Styles
   -------------------------------------------------------------------------- */
.article-header { margin-bottom: var(--space-6); }
.article-header__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-3); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
  margin-bottom: var(--space-4);
}
.article-meta__authors { font-weight: 700; color: var(--text-colour); }
.article-meta__separator { color: var(--border-colour); }
.article-body { font-size: var(--font-size-base); line-height: 1.7; }
.article-body h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.article-body p { margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   34. Related Section
   -------------------------------------------------------------------------- */
.related {
  margin-top: 0;
  padding: var(--space-8) 0;
  background-color: var(--color-light-grey);
  border-top: 4px solid var(--color-brand);
}
.related__heading { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-5); }
.related__col-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-colour);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-brand);
}
.related__list { list-style: none; }
.related__list li { margin-bottom: var(--space-2); line-height: 1.4; }
.related__list a { text-decoration: none; color: var(--color-brand); font-weight: 600; }
.related__list a:hover { text-decoration: underline; color: var(--color-red); }

/* --------------------------------------------------------------------------
   35. List Utilities
   -------------------------------------------------------------------------- */
.list-bullet { list-style: disc; padding-left: var(--space-6); }
.list-bullet li { margin-bottom: var(--space-2); }
.list-number { list-style: decimal; padding-left: var(--space-6); }
.list-number li { margin-bottom: var(--space-2); }
.list-spaced li { margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   36. Content Table
   -------------------------------------------------------------------------- */
.content-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
}
.content-table th,
.content-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-colour);
}
.content-table th {
  font-weight: 700;
  background-color: var(--color-light-grey);
  border-bottom: 2px solid var(--text-colour);
}
.content-table tr:hover { background-color: var(--color-light-grey); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* --------------------------------------------------------------------------
   37. Site Footer — GOV.UK inspired
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: #0b0c0c;
  color: #b1b4b6;
  padding: var(--space-10) 0 0;
  margin-top: 0;
  border-top: 4px solid var(--color-brand);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  align-items: start;
}

.site-footer__brand {
  margin-bottom: 0;
}

.site-footer__brand-name {
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.site-footer__brand-desc {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: #b1b4b6;
  max-width: 420px;
  margin-bottom: 0;
}

.site-footer__col-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.site-footer__col ul {
  list-style: none;
}

.site-footer__col li {
  margin-bottom: var(--space-2);
}

.site-footer__col a {
  color: #b1b4b6;
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.site-footer__col a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__bottom {
  border-top: 1px solid #333333;
  padding: var(--space-4) 0;
  margin-top: 0;
}

.site-footer__bottom-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  font-size: var(--font-size-sm);
}

.site-footer__bottom-links a {
  color: #b1b4b6;
  text-decoration: none;
}

.site-footer__bottom-links a:hover { text-decoration: underline; color: var(--color-white); }

.footer-sep {
  color: #505a5f;
  user-select: none;
}

.site-footer__copyright {
  font-size: var(--font-size-sm);
  color: #505a5f;
}

/* ==========================================================================
   RESPONSIVE — Tablet (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 26px;
    --font-size-xxl: 32px;
  }
  .container { padding: 0 var(--space-4); }
  .hero { padding: var(--space-6) 0 var(--space-5); }
  .hero__title { font-size: var(--font-size-xl); }
  .section { padding: var(--space-6) 0; }
  .header-bar__nav { display: none; }
  .header-bar__nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-black);
    padding: var(--space-4) var(--gutter);
    border-top: 2px solid #333333;
    z-index: 999;
  }
  .header-bar__nav.is-open a {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid #333333;
  }
  .mobile-toggle { display: block; }
  .grid--2 > *, .grid--3 > *, .grid--4 > * {
    flex: 1 1 calc(50% - var(--space-6));
    max-width: calc(50% - var(--space-6));
  }
  .grid--2-1 > *, .grid--3-1 > * { flex: 1 1 100%; max-width: 100%; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .phase-banner__content { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   RESPONSIVE — Mobile (≤480px)
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-xxl: 26px;
  }
  .container { padding: 0 var(--space-3); }
  .hero { padding: var(--space-5) 0 var(--space-4); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }
  .grid--2 > *, .grid--3 > *, .grid--4 > * { flex: 1 1 100%; max-width: 100%; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom-inner { flex-direction: column; text-align: center; }
  .footer-sep { display: none; }
  .publisher-info__row { flex-direction: column; gap: var(--space-1); }
  .publisher-info__label { width: auto; }
  .board-grid { grid-template-columns: 1fr; }
  .article-meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .site-footer__bottom-links { justify-content: center; }
}

/* ==========================================================================
   PAGE HEADER BORDER (inner pages)
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--border-colour);
}

/* ==========================================================================
   TOP BAR — imprint statement bar (inner pages)
   ========================================================================== */
.top-bar {
  background-color: var(--color-light-grey);
  border-bottom: 1px solid var(--border-colour);
  padding: var(--space-2) 0;
}

.top-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
}

.top-bar__brand {
  font-weight: 700;
  color: var(--text-colour);
}

/* ==========================================================================
   LOGO COMPONENTS (for pages using .logo wrapper)
   ========================================================================== */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo__mark {
  flex-shrink: 0;
}

.logo__text {
  display: flex;
  flex-direction: column;
}

.logo__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.2;
  text-decoration: none;
}

.logo__name:hover { color: var(--color-red); text-decoration: underline; }

.logo__tagline {
  font-size: 13px;
  color: var(--secondary-text-colour);
  line-height: 1.3;
}

/* ==========================================================================
   MAIN NAV (for pages using .main-nav wrapper)
   ========================================================================== */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--color-brand);
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  display: inline-block;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.main-nav .btn--submit {
  background-color: var(--color-red);
  color: var(--color-white);
  border: 2px solid var(--color-red);
  padding: 6px 16px;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 2px 0 var(--color-red-dark);
}

.main-nav .btn--submit:hover {
  background-color: var(--color-red-dark);
  border-color: var(--color-red-dark);
  color: var(--color-white);
  text-decoration: none;
}

.main-nav .btn--submit:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  background-color: var(--color-yellow);
  color: var(--text-colour);
  border-color: var(--text-colour);
}

/* ==========================================================================
   SITE FOOTER VARIANTS
   ========================================================================== */
.site-footer__name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.site-footer__tagline {
  font-size: var(--font-size-sm);
  color: #b1b4b6;
  margin-bottom: var(--space-3);
}

.site-footer__text {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: #b1b4b6;
  max-width: 600px;
}

/* ==========================================================================
   SEARCH BAR BUTTON (for search page)
   ========================================================================== */
.search-bar__button {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-brand);
  color: var(--color-white);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.search-bar__button:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* ==========================================================================
   MOBILE TOGGLE (light-header variant — only for the .main-nav pattern,
   scoped so it never overrides the dark .header-bar toggle above)
   ========================================================================== */
.top-bar ~ * .main-nav ~ .mobile-toggle,
.mobile-toggle.mobile-toggle--light {
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
}

.mobile-toggle.mobile-toggle--light:hover,
.mobile-toggle.mobile-toggle--light:focus {
  background-color: var(--color-brand-light);
  color: var(--color-brand);
  border-color: var(--color-brand);
}

/* ==========================================================================
   NAV SUBMIT WRAPPER
   ========================================================================== */
.nav-submit {
  display: inline-block;
}

/* ==========================================================================
   JOURNAL NAV — tab strip on journal pages
   ========================================================================== */
.journal-nav {
  background-color: var(--color-light-grey);
  border-bottom: 1px solid var(--border-colour);
  padding: 0;
}

.journal-nav .container {
  display: flex;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.journal-nav a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-brand);
  font-weight: 700;
  font-size: var(--font-size-base);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s, background-color 0.15s;
}

.journal-nav a:hover,
.journal-nav a:focus {
  background-color: var(--color-white);
  text-decoration: underline;
  border-bottom-color: var(--color-red);
}

.journal-nav a[aria-current="page"] {
  color: var(--text-colour);
  border-bottom-color: var(--color-brand);
  background-color: var(--color-white);
}

/* ==========================================================================
   BOARD GRID — editorial board member cards
   ========================================================================== */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.board-member {
  border: 1px solid var(--border-colour);
  border-top: 4px solid var(--color-brand);
  padding: var(--space-4);
  background-color: var(--color-white);
}

.board-member__name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-brand);
  margin-bottom: var(--space-1);
}

.board-member__role {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-red);
  margin-bottom: var(--space-1);
}

.board-member__affiliation {
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
  margin-bottom: var(--space-2);
}

.board-member p {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE — Mobile nav toggle
   ========================================================================== */
@media (max-width: 768px) {
  .main-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    padding: var(--space-4) var(--gutter);
    border-bottom: 2px solid var(--border-colour);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
  }

  .main-nav.is-open a {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-colour);
  }

  .main-nav.is-open .nav-submit {
    margin-top: var(--space-3);
  }

  .mobile-toggle { display: block; }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  *, *::before, *::after { background-color: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  a[href^="#"]::after { content: ""; }
  img { max-width: 100% !important; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  .eh-header, .header-bar, .main-nav, .mobile-toggle, .skip-link, .hero__actions, .btn, .notice--attention, .search-bar, .site-footer { display: none !important; }
  body { font-size: 12pt; }
  .container { max-width: 100% !important; padding: 0 !important; }
  .section { padding: 1em 0 !important; page-break-inside: avoid; }
  table { border-collapse: collapse; }
  table th, table td { border: 1px solid #000; padding: 4pt; }
}

/* ==========================================================================
   GOV.UK-STYLE HEADER (globe logo + Menu + Search)
   Replaces the old .header-bar. Navy masthead with an expanding Menu panel
   and search panel, toggled by /assets/js/main.js.
   ========================================================================== */
.eh-header {
  background-color: var(--color-brand);
  color: var(--color-white);
}

.eh-header__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Top masthead row --- */
.eh-header__bar {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.eh-header__bar .eh-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 66px;
}

.eh-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-white);
  padding: var(--space-2) 0;
}
.eh-header__logo:hover .eh-header__logotype { text-decoration: underline; text-underline-offset: 3px; }
.eh-header__logo:focus {
  outline: var(--focus-outline);
  outline-offset: 0;
  background: var(--color-yellow);
  color: var(--text-colour);
  box-shadow: 0 -2px var(--color-yellow), 0 4px var(--text-colour);
  text-decoration: none;
}
.eh-header__logo:focus .eh-header__logotype { color: var(--text-colour); text-decoration: none; }

/* Crown emblem sits inside a white circular seal with a fine ring (press-stamp look) */
.eh-header__globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 2px var(--color-brand);
}
.eh-header__globe svg { width: 27px; height: 27px; display: block; margin-top: 1px; }

.eh-header__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}
.eh-header__logotype {
  font-family: var(--font-wordmark);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}
.eh-header__tagline {
  margin-top: 5px;
  font-family: var(--font-family);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #aebfd8;
}

.eh-header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.eh-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 6px;
  border-bottom: 3px solid transparent;
}
.eh-header__toggle .eh-header__toggle-text { text-decoration: none; }
.eh-header__toggle:hover .eh-header__toggle-text { text-decoration: underline; text-underline-offset: 3px; }
.eh-header__toggle:focus {
  outline: none;
  background: var(--color-yellow);
  color: var(--text-colour);
  box-shadow: 0 3px var(--text-colour);
  border-bottom-color: transparent;
}
.eh-header__toggle.is-open { border-bottom-color: var(--color-white); }
.eh-header__toggle:focus.is-open { border-bottom-color: var(--text-colour); }

/* Search is icon-only (a search "bar" affordance, not the word) */
.eh-header__toggle[data-toggle="search"] { padding: 8px; }
.eh-header__toggle[data-toggle="search"] .eh-header__toggle-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.eh-header__toggle[data-toggle="search"] .eh-header__icon { width: 24px; height: 24px; }

.eh-header__icon { width: 20px; height: 20px; display: block; }
.eh-header__chevron { transition: transform 0.15s ease; }
.eh-header__toggle--menu.is-open .eh-header__chevron { transform: rotate(180deg); }

/* --- Expanding Menu panel --- */
.eh-header__nav {
  background-color: var(--color-brand-dark);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.eh-nav__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-8);
  padding: var(--space-3) 0 var(--space-5);
}
.eh-nav__list a {
  display: block;
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.eh-nav__list a:visited { color: var(--color-white); }
.eh-nav__list a:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-yellow);
}
.eh-nav__list a:focus {
  outline: none;
  background: var(--color-yellow);
  color: var(--text-colour);
  box-shadow: inset 4px 0 var(--text-colour);
}
.eh-nav__cta-item { grid-column: 1 / -1; margin-top: var(--space-4); }
.eh-nav__cta {
  display: inline-block !important;
  background-color: var(--color-red);
  color: var(--color-white) !important;
  border: 0 !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  box-shadow: 0 3px 0 var(--color-red-dark);
}
.eh-nav__cta:hover { background-color: var(--color-red-dark); color: var(--color-white) !important; }

/* --- Expanding Search panel --- */
.eh-header__search {
  background-color: var(--color-brand-dark);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: var(--space-4) 0;
}
.eh-searchform { display: flex; max-width: 100%; }
.eh-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  padding: 10px var(--space-3);
  border: 2px solid var(--color-white);
  border-right: 0;
  background: var(--color-white);
  color: var(--text-colour);
}
.eh-searchform__input:focus {
  outline: var(--focus-outline);
  outline-offset: 0;
  z-index: 1;
}
.eh-searchform__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  background-color: var(--color-green);
  color: var(--color-white);
  border: 2px solid var(--color-green);
  cursor: pointer;
}
.eh-searchform__btn svg { width: 22px; height: 22px; }
.eh-searchform__btn:hover { background-color: #005a2b; border-color: #005a2b; }
.eh-searchform__btn:focus { outline: var(--focus-outline); outline-offset: 0; }

/* --- Header responsive --- */
@media (max-width: 640px) {
  .eh-header__logotype { font-size: 21px; }
  .eh-header__globe svg { width: 32px; height: 32px; }
  .eh-header__toggle .eh-header__toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .eh-header__toggle { font-size: 16px; }
  .eh-nav__list { grid-template-columns: 1fr; padding-bottom: var(--space-3); }
}
@media (min-width: 641px) and (max-width: 900px) {
  .eh-nav__list { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FOOTER ADDRESS
   ========================================================================== */
.site-footer__address {
  font-style: normal;
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: #b1b4b6;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid #2a2a2a;
}
.site-footer__address strong {
  display: block;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 2px;
}
.site-footer__address a { color: #c7d3e6; text-decoration: none; }
.site-footer__address a:hover { color: var(--color-white); text-decoration: underline; }

@media (max-width: 768px) {
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__brand-desc { max-width: none; }
}

/* ==========================================================================
   HOMEPAGE & TRUST COMPONENTS
   ========================================================================== */
/* Key-figures band */
.stat-band {
  background-color: var(--color-light-grey);
  border-top: 1px solid var(--border-colour);
  border-bottom: 1px solid var(--border-colour);
  padding: var(--space-8) 0;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}
.stat-grid > div { padding: 0 var(--space-3); }
.stat-grid > div + div { border-left: 1px solid var(--border-colour); }
.stat__num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-brand);
  line-height: 1.05;
}
.stat__label {
  font-size: var(--font-size-sm);
  color: var(--secondary-text-colour);
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* Value / "why publish with us" cards */
.value-card {
  padding: var(--space-5);
  border: 1px solid var(--border-colour);
  background-color: var(--color-white);
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.value-card:hover {
  border-color: var(--color-brand);
  box-shadow: 0 10px 24px rgba(0,40,104,0.12);
  transform: translateY(-2px);
}
.value-card__icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border-radius: 50%;
}
.value-card__icon svg { width: 28px; height: 28px; display: block; }
.value-card__title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-2); }
.value-card__text { font-size: var(--font-size-base); color: var(--secondary-text-colour); margin: 0; }

/* Full-width call-to-action band */
.cta-band {
  background-color: var(--color-brand);
  color: var(--color-white);
  padding: var(--space-10) 0;
  border-top: 6px solid var(--color-red);
}
.cta-band h2 { color: var(--color-white); }
.cta-band__text { color: #d1e4f7; font-size: var(--font-size-lg); max-width: 640px; margin-bottom: var(--space-5); }

/* Home hero: give the two buttons clearer separation on the blue */
.card--accent { border-top: 4px solid var(--color-brand); }

/* Homepage journal cards: coloured accent per journal */
.card__eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-text-colour);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   JOURNAL LANDING HERO
   ========================================================================== */
.journal-hero {
  color: var(--color-white);
  padding: var(--space-10) 0;
}
.journal-hero--meridian { background-color: var(--color-brand); }
.journal-hero--cortexa  { background-color: var(--journal-cortexa); }
.journal-hero--vitalis  { background-color: var(--journal-vitalis); }
.journal-hero__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  color: rgba(255,255,255,0.82);
}
.journal-hero__title { color: var(--color-white); font-size: var(--font-size-xxl); margin-bottom: var(--space-3); }
.journal-hero__lead { color: rgba(255,255,255,0.92); font-size: var(--font-size-lg); max-width: 720px; margin-bottom: var(--space-5); }
.journal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.25);
}
.journal-hero__meta div { font-size: var(--font-size-sm); color: rgba(255,255,255,0.85); }
.journal-hero__meta strong { display: block; color: var(--color-white); font-size: var(--font-size-base); }

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .stat-grid > div + div { border-left: 0; }
  .stat-grid > div:nth-child(2) { border-left: 1px solid var(--border-colour); }
  .stat-grid > div:nth-child(4) { border-left: 1px solid var(--border-colour); }
}

/* Value-card grid (3 across → 2 → 1 on mobile) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 860px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .value-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PUBLISHED ARTICLE LIST (Springer / Taylor & Francis style)
   ========================================================================== */
.pub-list {
  border-top: 2px solid var(--color-brand);
}
.pub-card {
  display: block;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-colour);
  text-decoration: none;
  color: inherit;
}
.pub-card__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.pub-card__journal {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pub-card__type { font-size: var(--font-size-sm); color: var(--secondary-text-colour); }
.badge-oa {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-brand);
  background: var(--color-brand-light);
  border: 1px solid var(--color-brand);
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Red accent rule on each article row for US-flag brand pop */
.pub-card { border-left: 3px solid transparent; padding-left: var(--space-4); margin-left: calc(-1 * var(--space-4)); transition: border-color 0.15s ease, background 0.15s ease; }
.pub-card:hover { border-left-color: var(--color-red); background: #fbfbfa; }
.pub-card__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-colour);
  line-height: 1.25;
  margin-bottom: var(--space-2);
}
.pub-card:hover .pub-card__title { color: var(--color-brand); text-decoration: underline; }
.pub-card__authors { color: var(--text-colour); font-size: var(--font-size-base); margin-bottom: 4px; }
.pub-card__meta { color: var(--secondary-text-colour); font-size: var(--font-size-sm); }
.pub-card__meta .sep { color: var(--border-colour); margin: 0 6px; }

.section__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.section__head-row .section__heading { margin-bottom: 0; }

/* ==========================================================================
   HOMEPAGE CONTENT: intro prose, subject grid, news list
   ========================================================================== */
.lead-text {
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--text-colour);
  margin-bottom: var(--space-4);
}

/* Browse by subject */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.subject-card {
  display: block;
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--border-colour);
  border-left: 4px solid var(--color-brand);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-left-color 0.15s ease, transform 0.15s ease;
}
.subject-card:hover {
  border-left-color: var(--color-red);
  box-shadow: 0 8px 20px rgba(0,40,104,0.10);
  transform: translateY(-2px);
}
.subject-card__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-brand);
  margin-bottom: 4px;
}
.subject-card:hover .subject-card__name { color: var(--color-red); }
.subject-card__meta { display: block; font-size: var(--font-size-sm); color: var(--secondary-text-colour); }
@media (max-width: 820px) { .subject-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .subject-grid { grid-template-columns: 1fr; } }

/* News & announcements */
.news-list { border-top: 2px solid var(--color-brand); }
.news-item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-colour);
}
.news-item__date {
  flex-shrink: 0;
  width: 120px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 2px;
}
.news-item__body h3 { font-size: var(--font-size-lg); margin-bottom: 4px; line-height: 1.25; }
.news-item__body h3 a { text-decoration: none; color: var(--text-colour); }
.news-item__body h3 a:hover { color: var(--color-brand); text-decoration: underline; }
.news-item__body p { margin: 0; font-size: var(--font-size-base); color: var(--secondary-text-colour); }
@media (max-width: 600px) {
  .news-item { flex-direction: column; gap: 2px; }
  .news-item__date { width: auto; }
}

/* ==========================================================================
   FULL-TEXT ARTICLE (Django) — readable body, real tables, figures, ORCID
   ========================================================================== */
.article-hero {
  background-color: var(--color-brand);
  color: #fff;
  padding: var(--space-6) 0 var(--space-8);
  border-bottom: 4px solid var(--color-brand-dark);
}
.article-hero .breadcrumbs a { color: #fff; }
.article-hero__eyebrow {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #bcd0ea; margin-bottom: var(--space-2);
}
.article-hero__title {
  font-family: var(--font-display); color: #fff;
  font-size: 33px; line-height: 1.18; max-width: 32ch; margin: 0;
}

.article-authors { font-size: var(--font-size-base); line-height: 1.6; margin-bottom: var(--space-2); }
.article-authors .name { font-weight: 700; }
.article-affils { font-size: 14px; color: var(--secondary-text-colour); margin-bottom: var(--space-5); }
.article-affils span { display: block; }

/* ORCID chip */
.orcid { display: inline-block; line-height: 0; margin-left: 3px; vertical-align: text-bottom; }
.orcid svg { width: 15px; height: 15px; }

/* Abstract card */
.abstract-card {
  border: 1px solid var(--border-colour);
  border-left: 4px solid var(--color-brand);
  background: #fbfcfd;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.abstract-card h2 { font-family: var(--font-serif); font-size: 20px; margin-bottom: var(--space-2); }
.abstract-card .kw { margin-top: var(--space-3); font-size: 15px; color: var(--secondary-text-colour); }

/* Body typography */
.article-body { font-size: 18px; line-height: 1.75; color: #0b0c0c; max-width: none; }
.article-body > h2 {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  margin: var(--space-8) 0 var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-brand-light);
}
.article-body > h3 { font-family: var(--font-serif); font-size: 21px; margin: var(--space-5) 0 var(--space-2); }
.article-body p { margin-bottom: var(--space-4); }
.article-body ol.list-number { list-style: decimal; padding-left: var(--space-6); margin-bottom: var(--space-4); }
.article-body ul.list-bullet { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-4); }
.article-body li { margin-bottom: 6px; }

/* Real tables */
.article-body table {
  width: 100%; border-collapse: collapse; margin: var(--space-5) 0;
  font-size: 16px; line-height: 1.5;
}
.article-body caption { caption-side: top; text-align: left; font-size: 14px; color: var(--secondary-text-colour); margin-bottom: 6px; }
.article-body thead th {
  background: var(--color-brand); color: #fff; font-weight: 700;
  border: 1px solid var(--color-brand);
  padding: 10px 14px; text-align: left;
}
.article-body td, .article-body tbody th {
  border: 1px solid var(--border-colour); padding: 10px 14px;
  text-align: left; vertical-align: top;
}
.article-body tbody tr:nth-child(even) { background: #f6f8fa; }

/* Figures */
.article-figure { margin: var(--space-6) 0; }
.article-figure img { width: 100%; height: auto; border: 1px solid var(--border-colour); display: block; }
.article-figure figcaption { font-size: 14px; color: var(--secondary-text-colour); margin-top: var(--space-2); line-height: 1.5; }

/* Sidebar */
.article-side .btn { width: 100%; text-align: center; }
.article-side__cite { word-break: break-word; }
.article-side__cite p { font-size: 14px; line-height: 1.6; color: var(--text-colour); }

/* ==========================================================================
   SUBMISSION WIZARD (staged, GOV.UK-style)
   ========================================================================== */
.wizard__progress {
  display: flex;
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 1px solid var(--border-colour);
}
.wizard__progress li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary-text-colour);
  background: #f7f8fa;
  border-right: 1px solid var(--border-colour);
}
.wizard__progress li:last-child { border-right: 0; }
.wizard__progress li .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--border-colour); color: #fff; font-size: 14px; flex-shrink: 0;
}
.wizard__progress li.is-active { background: var(--color-brand); color: #fff; }
.wizard__progress li.is-active .num { background: #fff; color: var(--color-brand); }
.wizard__progress li.is-done { color: var(--color-brand); background: var(--color-brand-light); }
.wizard__progress li.is-done .num { background: var(--color-green); }
@media (max-width: 700px) {
  .wizard__progress { flex-direction: column; }
  .wizard__progress li { border-right: 0; border-bottom: 1px solid var(--border-colour); }
  .wizard__progress li:not(.is-active) { display: none; }  /* mobile: show current step only */
}

.wizard__panel { display: none; }
.wizard__panel.is-active { display: block; }
.wizard__panel h2 { font-family: var(--font-display); font-size: 26px; margin-bottom: var(--space-2); }
.wizard__panel .step-hint { color: var(--secondary-text-colour); margin-bottom: var(--space-5); }
.wizard__nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-colour); }
.wizard__nav .spacer { flex: 1; }

/* Ensure the [hidden] attribute always wins over component display rules */
[hidden] { display: none !important; }

/* ==========================================================================
   SUBMISSION v2 — circle stepper + dynamic author rows
   ========================================================================== */
.stepper { display:flex; list-style:none; padding:0; margin:0 0 var(--space-8); }
.stepper li { flex:1; text-align:center; position:relative; font-size:14px; font-weight:700; color:var(--secondary-text-colour); }
.stepper li .dot { width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid var(--border-colour); color:var(--secondary-text-colour); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:16px; position:relative; z-index:1; }
.stepper li::before { content:""; position:absolute; top:20px; left:-50%; width:100%; height:2px; background:var(--border-colour); z-index:0; }
.stepper li:first-child::before { display:none; }
.stepper li.is-active { color:var(--color-brand); }
.stepper li.is-active .dot { border-color:var(--color-brand); background:var(--color-brand); color:#fff; }
.stepper li.is-done { color:var(--color-green); }
.stepper li.is-done .dot { border-color:var(--color-green); background:var(--color-green); color:#fff; }
.stepper li.is-done::before { background:var(--color-green); }
@media (max-width:640px){ .stepper li .lbl { display:none; } }

.subm-card { border:1px solid var(--border-colour); border-top:4px solid var(--color-brand); background:#fff; padding:var(--space-6); }

.author-rows { margin-bottom:var(--space-2); }
.author-row { display:grid; grid-template-columns: 1.3fr 1.3fr 1fr auto auto; gap:var(--space-2); align-items:center; margin-bottom:var(--space-2); padding-bottom:var(--space-2); border-bottom:1px solid var(--color-light-grey); }
.author-row input { margin:0; }
.author-row__corr { display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; color:var(--secondary-text-colour); }
.author-row__remove { background:none; border:0; color:var(--color-red); font-size:24px; line-height:1; cursor:pointer; padding:2px 8px; }
.author-row__remove:hover { color:var(--color-red-dark); }
.btn--add { display:inline-flex; align-items:center; gap:8px; background:var(--color-brand-light); color:var(--color-brand); border:1px dashed var(--color-brand); box-shadow:none; font-weight:700; padding:10px 16px; cursor:pointer; }
.btn--add:hover { background:#d9e5f5; color:var(--color-brand); }
@media (max-width:680px){ .author-row { grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   HOME: mission block + news cards
   ========================================================================== */
.mission { max-width: 820px; }
.mission__eyebrow {
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-red); margin-bottom: var(--space-3);
}
.mission__statement {
  font-family: var(--font-display); font-size: 40px; line-height: 1.12;
  letter-spacing: -0.01em; margin-bottom: var(--space-4); color: var(--text-colour);
}
.mission__lead { font-size: 20px; line-height: 1.6; color: var(--secondary-text-colour); margin: 0; max-width: 720px; }
@media (max-width: 640px){ .mission__statement { font-size: 30px; } }

.news-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border-colour); border-top: 4px solid var(--color-brand);
  padding: var(--space-5); text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.news-card:hover { box-shadow: 0 10px 24px rgba(0,40,104,.12); transform: translateY(-2px); border-top-color: var(--color-red); }
.news-card__date { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-red); margin-bottom: var(--space-2); }
.news-card__title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text-colour); margin-bottom: var(--space-2); }
.news-card__text { font-size: 15px; color: var(--secondary-text-colour); line-height: 1.55; margin-bottom: var(--space-3); flex: 1; }
.news-card__more { font-weight: 700; color: var(--color-brand); }
.news-card:hover .news-card__more { color: var(--color-red); }

/* ==========================================================================
   ARTICLE SIDEBAR (wider, polished)
   ========================================================================== */
.art-side { position: static; }
.art-side__card { border: 1px solid var(--border-colour); border-top: 4px solid var(--color-brand); background: #fff; padding: var(--space-5); margin-bottom: var(--space-4); }
.art-side__dl { list-style: none; margin: 0; padding: 0; }
.art-side__dl li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 11px 0; border-bottom: 1px solid var(--color-light-grey); font-size: 15px; }
.art-side__dl li:last-child { border-bottom: 0; padding-bottom: 0; }
.art-side__dl .k { color: var(--secondary-text-colour); flex-shrink: 0; }
.art-side__dl .v { font-weight: 700; text-align: right; word-break: break-word; }
.art-side__dl .v a { font-weight: 700; }
.art-side .btn { width: 100%; text-align: center; margin-bottom: var(--space-4); }
.art-side__cite h3 { font-family: var(--font-serif); font-size: 16px; margin-bottom: var(--space-2); }
.art-side__cite p { font-size: 14px; line-height: 1.6; color: var(--text-colour); word-break: break-word; margin: 0; }

/* ==========================================================================
   MDPI-STYLE ARTICLE PAGE
   ========================================================================== */
.jbanner { color:#fff; }
.jbanner--meridian { background: var(--color-brand); }
.jbanner--cortexa  { background: var(--journal-cortexa); }
.jbanner--vitalis  { background: var(--journal-vitalis); }
.jbanner__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:12px 0; flex-wrap:wrap; }
a.jbanner__name, a.jbanner__name:link, a.jbanner__name:visited, a.jbanner__name:hover, a.jbanner__name:focus { font-family:var(--font-display); font-size:22px; font-weight:800; color:#fff !important; }
.jbanner__meta { font-size:13px; color:rgba(255,255,255,.85); }

.article-layout { display:grid; grid-template-columns:230px minmax(0,1fr) 270px; gap:var(--space-6); align-items:start; padding:var(--space-6) 0 var(--space-8); }

/* left menu (sticky TOC) */
.amenu { position:sticky; top:14px; font-size:14px; }
.amenu__title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--secondary-text-colour); margin-bottom:10px; }
.amenu__list { list-style:none; margin:0; padding:0; border-left:2px solid var(--border-colour); }
.amenu__list a { display:block; padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; color:var(--secondary-text-colour); text-decoration:none; line-height:1.35; }
.amenu__list a:hover { color:var(--color-brand); }
.amenu__list a.active { color:var(--color-brand); border-left-color:var(--color-brand); font-weight:700; }

/* header block */
.a-labels { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.a-type { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--secondary-text-colour); }
.a-title { font-family:var(--font-display); font-size:32px; line-height:1.2; margin-bottom:14px; }
.a-authors { font-size:17px; line-height:1.7; margin-bottom:10px; }
.a-authors .name { font-weight:700; }
.a-authors sup { color:var(--color-brand); font-weight:700; }
.a-affils { font-size:13px; color:var(--secondary-text-colour); line-height:1.6; margin-bottom:10px; }
.a-affils li { list-style:none; }
.a-affils sup { color:var(--color-brand); font-weight:700; margin-right:3px; }
.a-corr { font-size:13px; color:var(--secondary-text-colour); margin-bottom:14px; }
.a-citeline { font-size:14px; color:var(--secondary-text-colour); padding:10px 0; border-top:1px solid var(--border-colour); border-bottom:1px solid var(--border-colour); margin-bottom:14px; }
.a-citeline strong { color:var(--text-colour); }
.a-dates { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13px; color:var(--secondary-text-colour); margin-bottom:18px; }
.a-dates b { color:var(--text-colour); font-weight:700; }

/* action buttons */
.a-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.a-actions .btn { box-shadow:none; }

/* abstract + keywords */
.a-abstract { border:1px solid var(--border-colour); border-left:4px solid var(--color-brand); background:#fbfcfd; padding:var(--space-4) var(--space-5); margin-bottom:16px; }
.a-abstract h2 { font-family:var(--font-serif); font-size:20px; margin-bottom:8px; }
.a-keywords { font-size:15px; margin-bottom:8px; }
.a-keywords strong { color:var(--text-colour); }

/* right column boxes */
.abox { border:1px solid var(--border-colour); background:#fff; padding:var(--space-4); margin-bottom:16px; }
.abox__title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--secondary-text-colour); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--color-light-grey); }
.abox--metrics .row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--color-light-grey); font-size:15px; }
.abox--metrics .row:last-child { border-bottom:0; }
.abox--metrics .row b { color:var(--color-brand); font-size:18px; }
.abox__cite { font-size:13px; line-height:1.6; color:var(--text-colour); word-break:break-word; }

/* body section anchors offset for sticky */
.article-body h2[id], .article-body h3[id], #abstract, #references, #figures { scroll-margin-top:16px; }

@media (max-width: 1040px) {
  .article-layout { grid-template-columns: minmax(0,1fr) 260px; }
  .amenu { display:none; }
}
@media (max-width: 800px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { order:3; }
}

/* ==========================================================================
   ACCOUNTS: header account link, auth cards, dashboard
   ========================================================================== */
.eh-header__account {
  color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,0.45); border-radius: 3px;
  white-space: nowrap;
}
.eh-header__account:visited { color: #fff; }
.eh-header__account:hover, .eh-header__account:focus { background: #fff; color: var(--color-brand); }
.eh-header__account--logout { border-color: rgba(255,255,255,0.25); }
.eh-header__account--logout:hover, .eh-header__account--logout:focus { background: var(--color-red,#BF0A30); color: #fff; border-color: var(--color-red,#BF0A30); }

.auth-card {
  max-width: 460px; margin: 0 auto;
  border: 1px solid var(--border-colour); border-top: 4px solid var(--color-brand);
  background: #fff; padding: var(--space-6);
}
.auth-card h1 { font-size: 26px; margin-bottom: var(--space-2); }
.auth-card .muted { color: var(--secondary-text-colour); margin-bottom: var(--space-5); }
.auth-card form { margin: 0; }
.auth-card label { display:block; font-weight:700; margin-bottom:6px; }
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text] {
  width:100%; font-family:var(--font-family); font-size:var(--font-size-base);
  padding:10px var(--space-3); border:2px solid var(--text-colour); margin-bottom:var(--space-4);
}
.auth-card input:focus { outline: var(--focus-outline); outline-offset: 0; border-color: var(--color-brand); }
.auth-card .btn { width:100%; text-align:center; }
.auth-card .errorlist { list-style:none; color:var(--color-alert); font-size:14px; margin:0 0 10px; padding:0; }
.auth-divider { display:flex; align-items:center; gap:12px; color:var(--secondary-text-colour); font-size:14px; margin:var(--space-4) 0; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--border-colour); }
.btn--google {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; color:#1f1f1f; border:2px solid var(--border-colour); box-shadow:none; font-weight:700; padding:10px;
}
.btn--google:hover { background:#f7f8fa; color:#1f1f1f; }
.auth-alt { text-align:center; margin-top:var(--space-4); font-size:15px; }

/* Dashboard */
.dash-table { width:100%; border-collapse:collapse; }
.dash-table th, .dash-table td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border-colour); font-size:15px; }
.dash-table th { background:var(--grey-light,#f3f2f1); font-weight:700; }
.status-pill { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 10px; border-radius:999px; }
.status-received { background:var(--color-brand-light); color:var(--color-brand); }
.status-in_review { background:#fff3bf; color:#8a6d00; }
.status-accepted { background:var(--color-green-light); color:var(--color-green); }
.status-rejected { background:#fdecea; color:var(--color-red-dark); }

/* Dashboard summary stats */
.dash-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:var(--space-8,40px); }
.dash-stat { background:#fff; border:1px solid var(--border-colour); border-radius:12px; padding:20px 22px; }
.dash-stat b { display:block; font-family:var(--font-display); font-size:34px; line-height:1; color:var(--color-brand); }
.dash-stat span { display:block; margin-top:8px; font-size:14px; color:#4a4a4a; }
.dash-stat--admin { text-decoration:none; border-color:var(--color-brand); background:var(--color-brand-light); transition:transform .12s ease; }
.dash-stat--admin:hover { transform:translateY(-2px); }
.dash-stat--admin b { font-size:20px; }

/* Submission cards */
.sub-list { display:grid; gap:20px; }
.sub-card { background:#fff; border:1px solid var(--border-colour); border-radius:14px; padding:24px 26px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sub-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.sub-card__journal { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-brand); }
.sub-card__title { font-family:var(--font-display); font-size:22px; line-height:1.25; margin:4px 0 6px; }
.sub-card__meta { font-size:13px; color:#666; margin:0; }

/* Stage stepper */
.stepper { list-style:none; display:flex; margin:24px 0 0; padding:0; counter-reset:none; }
.step { flex:1; position:relative; text-align:center; font-size:13px; color:#8a8a8a; }
.step::before { content:""; position:absolute; top:15px; left:-50%; width:100%; height:3px; background:var(--border-colour); z-index:0; }
.step:first-child::before { display:none; }
.step__dot { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:32px; height:32px; margin:0 auto 8px; border-radius:50%; background:#fff; border:3px solid var(--border-colour); font-weight:700; font-size:14px; color:#8a8a8a; }
.step__label { display:block; font-weight:600; }
.step--done .step__dot { background:var(--color-green,#1a7f37); border-color:var(--color-green,#1a7f37); color:#fff; }
.step--done::before { background:var(--color-green,#1a7f37); }
.step--done { color:#2a2a2a; }
.step--current .step__dot { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.step--current::before { background:var(--color-green,#1a7f37); }
.step--current { color:var(--color-brand); }
.stepper--rejected .step--current .step__dot { background:var(--color-red,#BF0A30); border-color:var(--color-red,#BF0A30); }
.stepper--rejected .step--current { color:var(--color-red-dark,#8a0a22); }

.sub-card__note { margin-top:22px; padding:16px 18px; background:var(--color-brand-light); border-left:4px solid var(--color-brand); border-radius:0 8px 8px 0; }
.sub-card__note strong { display:block; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--color-brand); margin-bottom:6px; }
.sub-card__note p { margin:0; font-size:15px; line-height:1.6; }

.empty-state { text-align:center; padding:56px 20px; background:#fff; border:1px dashed var(--border-colour); border-radius:14px; }
.empty-state p { font-size:17px; color:#555; margin-bottom:20px; }

/* ==========================================================================
   PREMIUM AUTH (two-column split)
   ========================================================================== */
.auth-split {
  display: grid; grid-template-columns: 1fr 1fr; max-width: 940px; margin: 0 auto;
  border: 1px solid var(--border-colour); box-shadow: 0 16px 48px rgba(0,40,104,0.14);
  overflow: hidden;
}
.auth-split__brand {
  background:
    radial-gradient(120% 90% at 90% -10%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, #002d76, var(--color-brand) 60%, #00224f);
  color: #fff; padding: var(--space-8); display: flex; flex-direction: column; justify-content: center;
}
.auth-split__brand .eyebrow { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#aebfd8; margin-bottom: var(--space-3); }
.auth-split__brand h2 { color:#fff; font-family: var(--font-display); font-size: 27px; line-height:1.2; margin-bottom: var(--space-4); }
.auth-split__brand ul { list-style:none; padding:0; margin:0; }
.auth-split__brand li { position:relative; padding: 8px 0 8px 28px; color:#dbe6f5; font-size:15px; }
.auth-split__brand li::before { content:""; position:absolute; left:0; top:12px; width:14px; height:8px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.auth-split__form { padding: var(--space-8); background:#fff; }
.auth-split__form.auth-card { border:0; max-width:none; margin:0; box-shadow:none; }
@media (max-width: 780px) {
  .auth-split { grid-template-columns: 1fr; max-width: 460px; }
  .auth-split__brand { display: none; }
}

/* Social login buttons */
.btn--orcid {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; color:#1f1f1f; border:2px solid var(--border-colour); box-shadow:none;
  font-weight:700; padding:10px; margin-bottom:10px;
}
.btn--orcid:hover { background:#f7f8fa; color:#1f1f1f; }
.btn--google { margin-bottom:10px; }
.btn--social-disabled { opacity:.6; cursor:not-allowed; }
.btn--social-disabled:hover { background:#fff; color:#1f1f1f; }
.auth-note { font-size:13px; color:var(--secondary-text-colour); text-align:center; margin:4px 0 6px; }

/* ==========================================================================
   COMPUTATIONAL DIAGNOSTICS - JOURNAL IDENTITY AND FULL-TEXT ENHANCEMENTS
   ========================================================================== */
.journal-identity { display:flex; align-items:center; gap:18px; margin-bottom:var(--space-3); }
.journal-identity__mark { width:72px; height:72px; flex:0 0 auto; filter:drop-shadow(0 7px 16px rgba(0,0,0,.18)); }
.journal-identity .journal-hero__eyebrow { margin:0 0 4px; }
.journal-identity .journal-hero__title { margin:0; }

.jbanner__identity { display:flex; align-items:center; gap:10px; }
.jbanner__identity img { width:34px; height:34px; }
.jbanner__name { text-decoration:none; }

.article-details { margin:0; }
.article-details div { padding:9px 0; border-bottom:1px solid var(--border-colour); }
.article-details div:last-child { border-bottom:0; }
.article-details dt { font-size:12px; color:var(--secondary-text-colour); margin:0 0 2px; }
.article-details dd { margin:0; font-size:14px; font-weight:700; overflow-wrap:anywhere; }

.article-body .tabwrap { overflow-x:auto; margin:var(--space-5) 0; }
.article-body .tcap { font-size:14px; line-height:1.5; color:var(--secondary-text-colour); margin:0 0 8px; }
.article-body .mdpi { min-width:640px; }
.article-body .pls,
.article-body .citebox,
.article-body .suppl {
  margin:var(--space-5) 0;
  padding:var(--space-4) var(--space-5);
  background:#f7fafb;
  border-left:4px solid #C8871B;
  font-size:16px;
  line-height:1.65;
}
.article-body .pls .lbl,
.article-body .citebox .lbl { color:var(--color-brand); font-weight:700; }
.article-body .backmatter { border-bottom:0; }

@media (max-width:560px) {
  .journal-identity { align-items:flex-start; gap:12px; }
  .journal-identity__mark { width:54px; height:54px; }
  .journal-identity .journal-hero__title { font-size:32px; }
  .jbanner__meta { display:none; }
}

/* ==========================================================================
   PREMIUM ARTICLE PAGE v2 (masthead + sidebar + typeset body)
   Journal accent: deep teal · apex/accent: brand red · no gold
   ========================================================================== */
.masthead { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:14px 0; flex-wrap:wrap; }
.masthead__brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.masthead__brand, .masthead__brand:link, .masthead__brand:visited, .masthead__brand:hover, .masthead__brand:focus,
.masthead__brand .masthead__journal, .masthead__pub, .masthead__pub:hover { text-decoration:none !important; }
.masthead__mark { flex:0 0 auto; border-radius:11px; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.masthead__names { display:flex; flex-direction:column; line-height:1.05; }
a.masthead__brand .masthead__journal { font-family:var(--font-display); font-size:22px; font-weight:800; color:#fff !important; }
.masthead__sub { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:3px; }
.masthead__pub { text-align:right; }
.masthead__pub:hover { text-decoration:none; }
a.masthead__pub .masthead__pub-name { display:block; font-family:'Cinzel',Georgia,serif; font-size:15px; letter-spacing:.18em; color:#fff !important; }
.masthead__pub-sub { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:2px; }

.container--wide { max-width:1280px; }
.art2 { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:48px; align-items:start; padding:var(--space-5) 0 var(--space-8); }
.art2__main { min-width:0; }
.art2 .a-title, .art2__main { overflow-wrap:break-word; }

/* labels + title */
.art2 .a-labels { display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.art2 .a-type { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--journal-vitalis); }
.art2 .a-title { font-family:var(--font-display); font-size:clamp(24px,2.6vw,34px); line-height:1.2; letter-spacing:-.01em; margin:0 0 18px; text-align:left; overflow-wrap:break-word; hyphens:none; }
.art2 .a-authors { font-size:18px; line-height:1.5; margin:0 0 8px; }
.art2 .a-authors .name { font-weight:600; }
.art2 .a-authors sup { color:var(--teal-mid); font-weight:700; }
.art2 .a-authors .orcid { display:inline-block; width:15px; height:15px; margin-left:3px; vertical-align:middle; }
.art2 .a-affils { list-style:none; margin:0 0 6px; padding:0; color:var(--color-text-muted,#555); font-size:14px; }
.art2 .a-affils sup { margin-right:4px; }
.art2 .a-corr { font-size:14px; color:#444; margin:0 0 6px; }

/* highlights */
.a-highlights { background:var(--teal-tint); border:1px solid var(--teal-rule); border-left:4px solid var(--journal-vitalis); border-radius:0 10px 10px 0; padding:18px 22px; margin:26px 0; }
.a-highlights h2 { font-family:var(--font-display); font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--journal-vitalis); margin:0 0 10px; }
.a-highlights ul { margin:0; padding-left:20px; }
.a-highlights li { margin:6px 0; line-height:1.55; }
.a-highlights li::marker { color:var(--color-red); }

/* structured abstract */
.a-abstract { border-top:2px solid var(--journal-vitalis); padding-top:18px; margin:26px 0; }
.a-abstract h2 { font-family:var(--font-display); font-size:22px; margin:0 0 12px; }
.a-abstract p { line-height:1.7; margin:0 0 10px; }
.a-abstract .lbl { font-weight:700; color:var(--journal-vitalis); }
.a-keywords { font-size:14.5px; color:#333; margin-top:12px !important; }

/* sidebar */
.art2__side { display:flex; flex-direction:column; gap:16px; position:sticky; top:20px; align-self:start; max-height:calc(100vh - 40px); overflow-y:auto; }
.art2__side::-webkit-scrollbar { width:6px; }
.art2__side::-webkit-scrollbar-thumb { background:var(--teal-rule); border-radius:3px; }
.metabox { background:#fff; border:1px solid var(--teal-rule); border-radius:12px; padding:18px; }
.btn--block { width:100%; text-align:center; justify-content:center; }
.metabox__dl { margin:16px 0 0; }
.metabox__dl dt { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--teal-mid); font-weight:700; margin-top:14px; }
.metabox__dl dt:first-child { margin-top:0; }
.metabox__dl dd { margin:3px 0 0; font-size:13.5px; line-height:1.5; color:#2a2a2a; }
.metabox--metrics { display:flex; flex-direction:column; gap:0; padding:6px 18px; }
.metabox__row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--teal-rule); font-size:14px; }
.metabox__row:last-child { border-bottom:none; }
.metabox__row b { color:var(--journal-vitalis); }

/* ----- typeset body ----- */
.article-body { font-size:16.5px; line-height:1.72; color:var(--ink,#1a2230); }
.article-body h2 { font-family:var(--font-display); font-size:24px; margin:34px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--teal-rule); }
.article-body h3 { font-size:18.5px; font-weight:700; margin:24px 0 8px; color:#1c2b30; }
.article-body h2 .hn, .article-body h3 .hn { color:var(--journal-vitalis); margin-right:8px; }
.article-body p { margin:0 0 14px; }
.article-body a { color:var(--teal-mid); }
.article-body figure { margin:26px 0; text-align:center; }
.article-body figure img { max-width:100%; height:auto; border:1px solid var(--teal-rule); border-radius:6px; }
.article-body .fcap { font-size:14px; color:#555; text-align:left; margin-top:10px; line-height:1.55; }
.article-body .fcap b { color:var(--journal-vitalis); }

/* tables */
.article-body .tabwrap { margin:26px 0; overflow-x:auto; border:1px solid var(--teal-rule); border-radius:10px; background:#fff; -webkit-overflow-scrolling:touch; }
.article-body .tcap { font-size:14px; color:#555; margin:0; padding:12px 14px 0; line-height:1.55; }
.article-body .tcap b { color:var(--journal-vitalis); }
.article-body table.mdpi { width:100%; min-width:560px; border-collapse:collapse; font-size:14px; margin-top:10px; }
.article-body table.mdpi thead th { background:var(--journal-vitalis); color:#fff; text-align:left; padding:10px 12px; font-weight:600; border:none; }
.article-body table.mdpi td { padding:9px 12px; border-top:1px solid var(--teal-rule); vertical-align:top; }
.article-body table.mdpi tbody tr:nth-child(even) td { background:#f7fafb; }
.article-body table.mdpi td.num, .article-body table.mdpi th.num { text-align:right; white-space:nowrap; }
.article-body table.mdpi tr.sumrow td { background:var(--teal-tint); font-weight:700; border-top:1.5px solid var(--journal-vitalis); }

/* back matter + references */
.article-body h2.backmatter { font-size:17px; text-transform:uppercase; letter-spacing:.04em; color:#33484d; border-bottom:none; margin:28px 0 6px; }
.article-body .back { font-size:15px; color:#333; }
.article-body .back p { margin:0 0 10px; }
.article-body h2.refs { font-family:var(--font-display); font-size:24px; margin-top:36px; }
.article-body .refs-list p { padding-left:26px; text-indent:-26px; font-size:14px; line-height:1.6; margin:0 0 10px; color:#333; }
.article-body .refs-list a { word-break:break-word; }
.article-body .citebox { background:var(--teal-tint); border:1px solid var(--teal-rule); border-radius:8px; padding:12px 14px; font-size:14px; margin:16px 0; }

@media (max-width: 1024px) {
  .art2 { grid-template-columns:1fr; gap:28px; }
  .art2__side { position:static; order:-1; }
}

/* ==========================================================================
   POLICY / EDITORIAL CONTENT PAGES (Q1 standard)
   ========================================================================== */
.policy-hero { background:var(--color-brand); color:#fff; padding:40px 0 34px; }
.policy-hero .eyebrow { color:rgba(255,255,255,.8); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 8px; }
.policy-hero h1 { font-family:var(--font-display); font-size:clamp(28px,3.4vw,40px); margin:0; line-height:1.15; color:#fff; }
.policy-hero p { margin:12px 0 0; max-width:720px; color:rgba(255,255,255,.9); font-size:17px; line-height:1.6; }

.policy-wrap { display:grid; grid-template-columns:230px minmax(0,1fr); gap:48px; padding:36px 0 64px; align-items:start; }
.policy-toc { position:sticky; top:96px; font-size:14px; }
.policy-toc h2 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted,#555); margin:0 0 10px; }
.policy-toc a { display:block; padding:6px 0; color:#334; border-left:2px solid var(--border-colour); padding-left:12px; }
.policy-toc a:hover { color:var(--color-brand); border-color:var(--color-brand); text-decoration:none; }

.policy-body { max-width:780px; font-size:16.5px; line-height:1.72; color:#1c2530; }
.policy-body > section { padding-top:14px; margin-top:14px; }
.policy-body h2 { font-family:var(--font-display); font-size:24px; margin:30px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--border-colour); scroll-margin-top:90px; }
.policy-body h2:first-child { margin-top:0; }
.policy-body h3 { font-size:18px; margin:22px 0 8px; }
.policy-body p { margin:0 0 14px; }
.policy-body ul, .policy-body ol { margin:0 0 14px; padding-left:22px; }
.policy-body li { margin:7px 0; }
.policy-body a { color:var(--color-brand); text-decoration:underline; }
.policy-body .lead { font-size:18.5px; color:#333; }
.policy-body .callout { background:var(--color-brand-light); border-left:4px solid var(--color-brand); border-radius:0 8px 8px 0; padding:14px 18px; margin:18px 0; }
.policy-body .updated { color:var(--color-text-muted,#666); font-size:14px; margin-top:26px; padding-top:16px; border-top:1px solid var(--border-colour); }
.policy-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.policy-card { display:block; background:#fff; border:1px solid var(--border-colour); border-radius:12px; padding:20px 22px; }
.policy-card:hover { text-decoration:none; box-shadow:0 6px 18px rgba(16,24,40,.07); transform:translateY(-2px); transition:.14s; }
.policy-card h3 { font-family:var(--font-display); font-size:18px; margin:0 0 6px; color:var(--color-brand); }
.policy-card p { margin:0; font-size:14.5px; color:#555; }

@media (max-width:900px){ .policy-wrap{ grid-template-columns:1fr; } .policy-toc{ position:static; display:none; } }

/* Cookie consent banner */
.cookie-bar { position:fixed; left:16px; right:16px; bottom:16px; z-index:2000; background:#fff; border:1px solid var(--border-colour);
  border-radius:14px; box-shadow:0 10px 40px rgba(16,24,40,.18); padding:18px 22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; max-width:1120px; margin:0 auto; }
.cookie-bar__text { flex:1 1 320px; font-size:14.5px; color:#333; line-height:1.55; }
.cookie-bar__text a { color:var(--color-brand); }
.cookie-bar__actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Cite tool (article sidebar) */
.metabox__actions { display:flex; flex-direction:column; gap:10px; }
.cite-panel { margin-top:14px; border-top:1px solid var(--teal-rule); padding-top:14px; }
.cite-panel__tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.cite-tab { font-size:12px; font-weight:700; padding:5px 10px; border:1px solid var(--teal-rule); background:#fff; color:var(--journal-vitalis); border-radius:999px; cursor:pointer; }
.cite-tab:hover { border-color:var(--journal-vitalis); }
.cite-tab.is-active { background:var(--journal-vitalis); color:#fff; border-color:var(--journal-vitalis); }
.cite-text { white-space:pre-wrap; word-break:break-word; background:var(--teal-tint); border:1px solid var(--teal-rule); border-radius:8px; padding:12px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.55; color:#243; margin:0 0 10px; max-height:230px; overflow:auto; }