/* =====================================================
   NCI White Paper — VitalMe
   Editorial whitepaper, warm cream academic system.
   Shares the visual language of the NCI conference deck.
   ===================================================== */

:root {
  --bg:        #ECE3D2;   /* page / desk */
  --paper:     #FAF6EC;   /* document sheet */
  --paper-2:   #F4EEE0;   /* inset panels */
  --ink:       #211F1B;
  --ink-soft:  #43413B;   /* body text */
  --ink-mute:  #8A8275;
  --line:      #D9CFBC;
  --line-soft: #E5DCCB;
  --accent:    #B0512F;   /* terracotta */
  --accent-deep:#8C3D22;
  --accent-soft:#E8DAC4;
  --positive:  #5A7A4E;
  --negative:  #8C3A2E;
  --highlight: #EFE4CF;

  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 70ch;
  --sheet: 920px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle desk texture lines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(176,81,47,0.05), transparent 60%);
  z-index: 0;
}

/* ---------- Sheet ---------- */
.sheet {
  position: relative;
  z-index: 1;
  max-width: var(--sheet);
  margin: 56px auto 96px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 30px 80px -40px rgba(60,40,20,0.45),
              0 4px 14px -8px rgba(60,40,20,0.18);
}

.pad {
  padding: 0 clamp(28px, 7vw, 104px);
}

/* ---------- Cover ---------- */
.cover {
  position: relative;
  background: #0c0a08;
  color: #F4ECDD;
  overflow: hidden;
  padding: 76px clamp(28px, 7vw, 104px) 56px;
}
.cover .cover-img {
  position: absolute;
  inset: 0;
  background-image: url("paper-assets/image1.png");
  background-size: cover;
  background-position: center 38%;
  opacity: 1;
}
.cover .cover-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,6,4,0.82) 0%, rgba(8,6,4,0.30) 34%, rgba(8,6,4,0.30) 52%, rgba(8,6,4,0.88) 100%);
}
.cover > * { position: relative; z-index: 2; }

.cover .kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244,236,221,0.82);
  margin: 0 0 30vh 0;
}
.cover .doc-type {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.cover h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 7.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.026em;
  margin: 16px 0 0;
  text-wrap: balance;
}
.cover h1 em { font-style: italic; color: #E7B79B; }
.cover .subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.32;
  color: rgba(244,236,221,0.9);
  margin: 22px 0 0;
  max-width: 40ch;
  text-wrap: pretty;
}
.cover .byline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 64px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(244,236,221,0.22);
}
.cover .author .name {
  font-family: var(--font-display);
  font-size: 22px;
  color: #F4ECDD;
  line-height: 1.2;
}
.cover .author .role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,236,221,0.66);
  margin-top: 5px;
}
.cover .cover-date {
  margin-left: auto;
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,236,221,0.66);
}
.cover .cover-copyright {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,236,221,0.62);
}
.cover .credit {
  position: absolute;
  right: 16px;
  bottom: 10px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(244,236,221,0.5);
}

/* ---------- Table of Contents ---------- */
.toc {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 48px clamp(28px, 7vw, 104px) 52px;
}
.toc .toc-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.toc .toc-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.toc-grid {
  columns: 2;
  column-gap: 72px;
}
@media (max-width: 720px){ .toc-grid { columns: 1; } }
.toc a {
  text-decoration: none;
  color: var(--ink-soft);
  break-inside: avoid;
}
.toc .toc-h2 {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: baseline;
  margin: 18px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.toc .toc-h2:first-child { margin-top: 0; }
.toc .toc-h2 .n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}
.toc .toc-h2 .t {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ink);
  line-height: 1.15;
}
.toc .toc-h3 {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: baseline;
  margin: 5px 0;
  font-size: 14.5px;
}
.toc .toc-h3 .n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.toc .toc-h3 .t { color: var(--ink-soft); }
.toc a:hover .t { color: var(--accent); }
.toc a:hover .toc-h3 .t { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Body flow ---------- */
.body {
  padding-top: 12px;
  padding-bottom: 40px;
  position: relative;
}
.body > * { max-width: var(--measure); }

/* Pre-print draft watermark — tiled, very light, non-interactive */
.body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='320'><text x='230' y='170' font-family='Public Sans, sans-serif' font-size='40' font-weight='700' letter-spacing='2' fill='%23B0512F' fill-opacity='0.06' text-anchor='middle' transform='rotate(-30 230 160)'>PRE-PRINT DRAFT</text></svg>");
  background-repeat: repeat;
  background-position: center top;
}
.body > * { position: relative; z-index: 1; }

/* Section (h2) */
.h2 {
  max-width: none;
  margin: 78px 0 0;
  padding-top: 40px;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 18px;
}
.h2:first-child { margin-top: 22px; }
.h2 .h2-num {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-bottom: 10px;
}
.h2 .h2-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* Subsection (h3) */
h3.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 52px 0 4px;
  text-wrap: balance;
}
h3.h3 .h3-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 15px;
  color: var(--accent);
  margin-right: 12px;
  letter-spacing: 0.02em;
}

/* Sub-subsection (h4) */
h4.h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  margin: 34px 0 2px;
}
h4.h4 .h4-num {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mute);
  margin-right: 10px;
}

/* recurring mono label: "Summary and Main Contributions" / "Neuroscience Foundation" */
.label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 26px 0 -6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  content: "";
  width: 16px; height: 2px;
  background: var(--accent);
  display: inline-block;
}

/* Paragraphs */
p.t {
  margin: 18px 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
p.t strong { color: var(--ink); font-weight: 650; }
p.t em { font-style: italic; }
.body a.ref-link,
p.t a { color: var(--accent); }

/* lead-in definition rows (bold term — description) sit tighter as a list feel */
p.t.lead {
  margin: 12px 0;
  padding-left: 20px;
  border-left: 2px solid var(--line);
}
p.t.lead strong { color: var(--ink); }

/* Organizing-principle callout */
.principle {
  max-width: var(--measure);
  margin: 30px 0;
  background: var(--highlight);
  border-left: 3px solid var(--accent);
  padding: 22px 28px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
.principle strong { color: var(--accent-deep); font-weight: 600; }

/* ---------- Figures ---------- */
figure.fig {
  max-width: none;
  margin: 40px 0;
  padding: 0;
}
figure.fig .frame {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 14px;
  display: flex;
  justify-content: center;
}
figure.fig img {
  display: block;
  max-width: 100%;
  height: auto;
}
figure.fig.tight .frame { padding: 0; border: none; background: transparent; }
figure.fig figcaption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  max-width: var(--measure);
}
figure.fig figcaption .cap-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 3px;
}
figure.fig figcaption a { color: var(--accent); word-break: break-all; }

/* size control for specific figures */
figure.fig.narrow .frame img { max-width: 560px; width: 100%; }
figure.fig.mid .frame img { max-width: 720px; width: 100%; }

/* ---------- Citations ---------- */
sup.cite {
  line-height: 0;
  font-size: 0.72em;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
a.ref-link {
  text-decoration: none;
  color: var(--accent);
  padding: 0 0.5px;
  font-weight: 500;
}
a.ref-link:hover { text-decoration: underline; }

/* ---------- References ---------- */
.references {
  padding-top: 10px;
  padding-bottom: 64px;
}
.refs-list {
  max-width: none;
  margin-top: 24px;
  columns: 2;
  column-gap: 56px;
}
@media (max-width: 760px){ .refs-list { columns: 1; } }
.refs-list .ref {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
}
.refs-list .ref .rn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.refs-list .ref a { color: var(--accent); word-break: break-all; text-decoration: none; }
.refs-list .ref a:hover { text-decoration: underline; }
.refs-list .ref:target {
  background: var(--highlight);
  border-radius: 3px;
  box-shadow: 0 0 0 6px var(--highlight);
}

/* ---------- Footer ---------- */
.colophon {
  padding: 30px clamp(28px, 7vw, 104px) 40px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.colophon .brand { color: var(--ink); letter-spacing: 0.2em; }

/* back to top */
.totop {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 20;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 22px -8px rgba(140,61,34,0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  font-size: 18px;
}
.totop.show { opacity: 1; pointer-events: auto; }

/* ---------- Print ---------- */
@media print {
  body { background: #fff; font-size: 11pt; line-height: 1.5; }
  body::before, .totop { display: none; }
  .sheet { margin: 0; max-width: none; border: none; box-shadow: none; }
  .h2 { break-before: page; }
  .h2:first-child { break-before: avoid; }
  figure.fig, .refs-list .ref, h3.h3, h4.h4, .label { break-inside: avoid; }
  a.ref-link { color: var(--accent-deep); }
  .refs-list { columns: 2; }
}