:root {
  /* palette — cool / blue hue */
  --paper:      #F5F7FA;
  --paper-2:    #E9EFF7;   /* cool tint for cards */
  --ink:        #1A2433;
  --ink-soft:   #39475A;
  --muted:      #5D6A7B;
  --line:       #DBE3ED;

  --clay:       #2E6FB7;   /* primary blue accent */
  --clay-deep:  #1E5390;
  --clay-tint:  #DCE8F7;
  --gold:       #1C8C88;   /* cool teal (used in progress gradient) */

  /* type */
  --serif: "Charter", "Charis SIL", "Iowan Old Style", "Palatino Linotype", Palatino, "Georgia", "Times New Roman", serif;
  --sans:  "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  --mono:  "SF Mono", "JetBrains Mono", "Menlo", ui-monospace, monospace;

  /* layout */
  --measure: 44rem;     /* ~704px text column */
  --wide:    62rem;     /* breakout figures */
  --pad: clamp(1.15rem, 4vw, 2rem);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.06rem, 0.55vw + 0.95rem, 1.2rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--clay-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- reading progress bar ---- */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--clay), var(--gold));
  z-index: 60; transition: width .08s linear;
}

/* ---- sticky mini header ---- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem var(--pad);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform .3s ease, border-color .3s ease;
  font-family: var(--sans);
}
.topbar.show { transform: translateY(0); border-color: var(--line); }
.topbar__title { font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__links { display: flex; gap: 1.1rem; font-size: .8rem; }
.topbar__links a { color: var(--muted); }
@media (max-width: 620px){ .topbar__links { display: none; } }

/* ---- shared column ---- */
.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { padding: clamp(4.5rem, 9vw, 7.5rem) 0 1.5rem; text-align: center; }
.eyebrow {
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--clay);
  margin: 0 0 1.3rem;
}
h1.title {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(2.05rem, 4.6vw + 1rem, 3.5rem);
  line-height: 1.07; letter-spacing: -0.021em;
  margin: 0 auto; max-width: 16ch; color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 900px){ h1.title { max-width: 22ch; } }
/* meta row */
.meta { margin-top: 2.1rem; font-family: var(--sans); }
.authors { font-size: .98rem; color: var(--ink-soft); font-weight: 500; line-height: 1.6; }
.affil { font-size: .82rem; color: var(--muted); margin-top: .35rem; letter-spacing: .01em; }

/* action buttons */
.actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.8rem; font-family: var(--sans); }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; font-weight: 500; padding: .56rem 1.05rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft); transition: all .18s ease;
}
.btn:hover { text-decoration: none; border-color: var(--clay); color: var(--clay-deep); transform: translateY(-1px); }
.btn--primary { background: var(--clay); border-color: var(--clay); color: #fff; }
.btn--primary:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: #fff; }
.btn svg { width: 15px; height: 15px; }

/* =========================================================================
   ARTICLE
   ========================================================================= */
.article { padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.article > * { margin-inline: auto; }

/* Left-aligned (readable) text, but the column is centered on the page like the headers. */
.article p, .article ul, .article ol { max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); text-align: left; }
.article p { margin: 0 auto 1.35rem; }
.lead-para { font-size: 1.16em; color: var(--ink-soft); }

.article h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.45rem, 1.4vw + 1.1rem, 1.95rem);
  line-height: 1.18; letter-spacing: -.015em;
  max-width: var(--measure); margin: 3.4rem auto 1.1rem; padding-inline: var(--pad); color: var(--ink);
  scroll-margin-top: 5rem; text-wrap: balance; text-align: center;
}
.article h2::before {
  content: ""; display: block; width: 2.2rem; height: 3px; border-radius: 3px;
  background: var(--clay); margin: 0 auto 1.1rem; opacity: .85;
}
.article h3 {
  font-family: var(--sans); font-weight: 600; font-size: 1.2rem;
  max-width: var(--measure); margin: 2.2rem auto .6rem; padding-inline: var(--pad); color: var(--ink);
  text-align: center;
}

.article strong { font-weight: 700; color: var(--ink); }
.article em { font-style: italic; }

/* lists */
.article ul { padding-left: calc(var(--pad) + 1.2rem); margin-bottom: 1.5rem; }
.article li { margin: 0 0 .5rem; padding-left: .3rem; }
.article li::marker { color: var(--clay); }

/* links inline */
.article a { border-bottom: 1px solid color-mix(in srgb, var(--clay) 35%, transparent); }
.article a:hover { text-decoration: none; border-bottom-color: var(--clay); background: var(--clay-tint); }

/* =========================================================================
   FIGURES
   ========================================================================= */
figure { max-width: var(--wide); margin: 2.6rem auto; padding-inline: var(--pad); }
figure.wide { max-width: 74rem; }
.fig-frame {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 14px 36px -30px rgba(26,58,110,.30);
}
figure img { margin-inline: auto; }
/* On phones, let the dense heatmap keep a readable width and scroll sideways. */
@media (max-width: 700px){
  figure.wide .fig-frame { overflow-x: auto; }
  figure.wide img { min-width: 640px; }
}

/* =========================================================================
   TABLES
   ========================================================================= */
.table-wrap { max-width: var(--wide); margin: 2.4rem auto; padding-inline: var(--pad); overflow-x: auto; }
table {
  width: 100%; border-collapse: collapse; font-family: var(--sans);
  font-size: .9rem; color: var(--ink-soft);
}
thead th {
  font-weight: 600; color: var(--ink); text-align: left;
  padding: .7rem .8rem; border-bottom: 2px solid var(--ink-soft);
  white-space: nowrap;
}
tbody td, tbody th { padding: .62rem .8rem; border-bottom: 1px solid var(--line); text-align: left; }
tbody th { font-weight: 600; color: var(--ink); }
tbody tr:hover { background: var(--paper-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* compact results table */
table.compact { font-size: .92rem; max-width: 34rem; margin-inline: auto; }
table.compact td.num { font-weight: 600; color: var(--ink); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  margin-top: 4rem; border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: clamp(2.5rem, 6vw, 4rem) 0 3rem;
}
.site-footer .wrap { max-width: var(--wide); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.footer-h { font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin: 0 0 .9rem; }
.cite-box {
  position: relative; background: var(--ink); color: #DCE6F1; border-radius: 12px;
  padding: 1.1rem 1.2rem; font-family: var(--mono); font-size: .76rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.copy-btn {
  position: absolute; top: .7rem; right: .7rem; font-family: var(--sans);
  font-size: .72rem; font-weight: 500; padding: .3rem .65rem; border-radius: 7px;
  border: 1px solid #33414f; background: #28323d; color: #DCE6F1; cursor: pointer;
}
.copy-btn:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.footer-meta { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-top: 2.2rem; line-height: 1.6; }

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