/* ---------------------------------------------------------------------------
   Styling for the pages PHP renders: an article, an issue's table of contents,
   the list of every issue.

   A separate stylesheet from the React site's, on purpose. Vite fingerprints
   its CSS on every build (index-a1b2c3.css), and a PHP page that had to guess
   that filename would lose its styling the first time somebody rebuilt the
   front end without telling the backend. This file's name never changes.

   The tokens below mirror src/styles/app.css — ASPIRE's palette: sage-tinted
   neutrals, with JHCSC green kept for links, the one button and the current
   page. Keep the two in step by hand.
   --------------------------------------------------------------------------- */

:root {
  --ink: #11181c;
  --ink-2: #465049;
  --ink-3: #5c6660;
  --line: #e3e9e5;
  --line-strong: #d3dbd6;
  --line-hover: #8a948e;
  --scroll-thumb: #bcc6c0;
  --bg: #ffffff;
  --bg-soft: #f7faf8;
  --hover: #f2f6f3;
  --green: #30a46c;
  --green-hover: #2b9862;
  --green-text: #18794e;
  --green-bg: rgba(48, 164, 108, 0.12);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --ring: 0 0 0 1px var(--line);
  --max: 74rem;
  --serif: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-text); text-underline-offset: 0.15em; }
a:hover { color: var(--green-hover); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* The React site's scrollbar: a slim rounded pill on a clear track, always
   shown, 12px to grab, widening and darkening under the pointer. Firefox gets
   the standard properties only; Chromium, seeing them, would drop the rest. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }

*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  background-clip: padding-box;
  border: 3.5px solid transparent;
  border-radius: 999px;
  min-height: 40px;
}

*::-webkit-scrollbar-thumb:hover { background-color: var(--line-hover); border-width: 3px; }
*::-webkit-scrollbar-thumb:active { background-color: var(--ink-3); border-width: 3px; }

.icon { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- Masthead ----------------------------------------------------------- */

/* Pinned to the top while the page scrolls, as on the React pages. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.masthead-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand:hover { color: inherit; }

.brand-logo {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
}

.brand-text { min-width: 0; }

.brand-text strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 600;
}

.brand-text small {
  display: block;
  color: var(--ink-3);
  font-size: 0.78rem;
}

.nav-in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.75rem;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background 0.13s ease, color 0.13s ease;
}

.nav a .icon { color: var(--ink-3); transition: color 0.13s ease; }
.nav a:hover .icon { color: var(--ink-2); }

.nav a:hover { background: var(--hover); color: var(--ink); }

.nav a.is-active {
  color: var(--green-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--green);
}

.nav a.is-active .icon { color: var(--green); }

/* ---- Page --------------------------------------------------------------- */

.page {
  padding-top: 2rem;
  padding-bottom: 4rem;
  max-width: 54rem;
}

.crumb {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}

.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-text);
  margin-bottom: 0.5rem;
}

.art-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.2rem);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.art-subtitle {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink-2);
  margin: 0 0 0.8rem;
}

.art-authors {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.art-affil,
.art-meta {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
}

.art-actions { margin: 1.5rem 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.13s ease;
}

.btn:hover { background: var(--green-hover); color: #fff; }

.article section { margin-top: 2rem; }

.article h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  margin: 0 0 0.9rem;
}

.art-abstract p {
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: justify;
  margin: 0 0 1rem;
}

.cite {
  background: var(--bg-soft);
  box-shadow: var(--ring);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  margin: 0;
}

.art-licence {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* ---- Issue table of contents, and the list of issues -------------------- */

.issue-head { margin-bottom: 2rem; }

.issue-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  margin: 0 0 0.5rem;
}

.issue-desc { color: var(--ink-2); }

.toc-h {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.toc {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.toc-item {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

.toc-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.4;
}

.toc-title:hover { color: var(--green-text); text-decoration: underline; }

.toc-authors {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.toc-meta {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.toc-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.55rem;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-2);
}

.toc-pdf .icon { color: var(--green-text); }
.toc-pdf:hover { background: var(--hover); color: var(--ink); }

.empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-3);
  background: var(--bg-soft);
  box-shadow: var(--ring);
  border-radius: var(--radius-lg);
}

/* ---- Footer ------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  margin-top: 3rem;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.foot p { margin: 0.35rem 0; }
.foot-line { display: flex; gap: 0.45rem; align-items: flex-start; }
.foot-line .icon { margin-top: 0.2rem; color: var(--ink-3); }

.foot strong {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}

.dim { color: var(--ink-3); }

@media (max-width: 46rem) {
  .brand-logo { width: 2.6rem; height: 2.6rem; }
  .brand-text strong { font-size: 0.95rem; }
  /* Seven links wrap onto rows here; icons would only make the rows longer. */
  .nav a .icon { display: none; }
  .nav a { padding: 0.5rem 0.6rem; }
}

@media print {
  .nav, .foot, .crumb, .art-actions { display: none; }
  body { font-size: 12pt; }
}