/* Data Fusion identity, adapted to the editorial workspace components. */
:root {
  --editorial-radius: 8px;
  font-family: "Segoe UI", system-ui, sans-serif;
}

body { line-height: 1.6; }
h1, h2, h3, .brand strong, .header-journal { font-family: inherit; }
.page-shell { width: min(1200px, calc(100% - 40px)); }
.topbar, .main-nav, .site-footer {
  padding-inline: max(20px, calc((100vw - 1200px) / 2));
}
.topbar {
  min-height: 80px;
  color: var(--ink);
  background: var(--ecosystem-surface);
  border-bottom: 1px solid var(--line);
}
.brand { letter-spacing: .04em; }
.brand strong { color: var(--service-primary); font-size: 15px; }
.brand small, .header-journal { color: var(--muted); }
.account-area { flex-wrap: wrap; gap: 12px; font-size: 13px; }
.account-area a { color: var(--service-primary); }
.theme-toggle {
  color: var(--ink);
  border-color: var(--line);
  border-radius: var(--editorial-radius);
  font-size: 12px;
}
.theme-toggle:hover { background: var(--ecosystem-soft-surface); }
.main-nav { gap: 24px; flex-wrap: wrap; }
.main-nav a { font-size: 13px; }
.main-nav a.active, .main-nav a:hover {
  color: var(--service-primary);
  border-color: var(--service-primary);
}

.hero, body.dark-mode .hero {
  min-height: 340px;
  padding: clamp(32px, 6vw, 72px) clamp(24px, 4vw, 48px);
  color: var(--ink) !important;
  background: var(--ecosystem-surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--editorial-radius);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--service-primary) 10%, transparent), transparent 55%);
}
.hero::after { display: none; }
.hero h1, .hero h2, .hero h3, .hero p,
body.dark-mode .hero h1, body.dark-mode .hero h2,
body.dark-mode .hero h3, body.dark-mode .hero p { color: var(--ink) !important; }
.hero h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.2; }
.hero h1 em { color: var(--service-primary); }
body.dark-mode .hero h1 em { color: var(--service-accent); }
.hero .eyebrow { color: var(--service-primary) !important; }
.hero .hero-copy { color: var(--muted) !important; font-size: 16px; }
.hero-orbit { color: var(--muted); }
.hero-orbit b { color: var(--service-primary); border-color: var(--line); }
.button { border-radius: var(--editorial-radius); font-size: 14px; padding-inline: 20px; }
.hero .button-light, .button-primary { color: #fff; background: var(--service-primary); }
.hero .button-light:hover, .button-primary:hover { background: var(--service-secondary); }

.journal-card, .loading-card, .publication-card, .form-card,
.work-card, .admin-panel, .detail-card {
  border-radius: var(--editorial-radius);
  box-shadow: var(--ecosystem-shadow);
}
.journal-card { border-top: 4px solid var(--service-primary); }
.publication-card { border-left-color: var(--service-primary); }
.journal-card h3, .publication-card h3 { font-size: 18px; }
.journal-card p, .publication-card .abstract, .work-card p,
.page-title > p:last-child, .submission-callout p { font-size: 14px; }
.journal-meta, .publication-info, .muted, .field-hint { font-size: 12px; }
.publication-card .abstract, .journal-meta { color: var(--muted); }
.submission-callout, .inline-form, .detail-card .manuscript-text, .tag {
  background: var(--ecosystem-soft-surface);
  border-radius: var(--editorial-radius);
}
.submission-callout p, label { color: var(--muted); }
label, input, select, textarea { font-size: 14px; }
input, select, textarea { border-color: var(--line); border-radius: var(--editorial-radius); }
input:focus, select:focus, textarea:focus {
  border-color: var(--service-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--service-primary) 16%, transparent);
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--service-primary);
  outline-offset: 4px;
}
.site-footer { background: var(--ecosystem-footer); font-size: 12px; }
body.dark-mode { color-scheme: dark; }
body.dark-mode .account-area a { color: var(--service-accent); }
body.dark-mode .journal-meta { color: var(--muted); }

@media (max-width: 760px) {
  .topbar, .site-footer { padding-inline: 18px; }
  .main-nav { flex-wrap: nowrap; padding-inline: 18px; }
  .page-shell { width: calc(100% - 32px); }
  .hero, body.dark-mode .hero { min-height: auto; padding: 32px 24px; }
}
@media (max-width: 520px) {
  .account-area { width: 100%; margin-left: 0; }
  .hero h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .button:hover { transform: none; }
}