/* Chain Drain — new homepage (Figma "Homepage - PDF", node 55:18).
   Whitepaper-cover hero + intro body + institutional footer bar.
   Built on the shared 5-column grid (tokens.css: --grid-cols / --margin /
   --gutter), so elements snap to the same column tracks as the rest of the
   site. Figma placement on that grid:
     hero      → centered over cols 2-4
     paragraph → cols 2-4        (x=318, w=876)
     footer:   CHAIN DRAIN col 1 · White Paper col 2 · Research Database col 3 · logo col 5
*/

.pdf-home {
  /* Figma page fill (#e6e6e6) is lighter than the shared --color-bg field. */
  --pdf-page-bg: #e6e6e6;

  min-height: 100vh;
  box-sizing: border-box;            /* so body's footer-reserve padding fits in 100vh */
  background: var(--pdf-page-bg);
  color: var(--color-ink);           /* #4b2424 */
  font-family: var(--font-body);
  margin: 0;
}

/* ---- main: the 5-column grid (20px margins, 20px gutters) ----
   The fixed footer + its below-content reservation live in site-footer.css. */
.pdf-main {
  display: grid;
  /* minmax(0,1fr): equal tracks that never grow to fit content, so column 2
     lines up with the footer's column 2 at every width (not just 1512px). */
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: clamp(48px, 6vw, 88px) var(--margin);
  box-sizing: border-box;
}
/* Every direct child sits in the centre 3 columns (2-4) by default, so a plain
   <p> or any new element lines up with the hero and body copy instead of
   auto-placing into column 1. */
.pdf-main > * {
  grid-column: 2 / 5;
}

/* ---- hero: clickable whitepaper cover + caption (centered over cols 2-4) ---- */
.pdf-hero {
  grid-column: 2 / 5;
  justify-self: center;
  width: clamp(240px, 34vw, 463px);  /* Figma cover = 463px on a 1512px frame */
  text-decoration: none;
  color: inherit;
}

/* The sheet: the mesh-gradient field with the cover art printed over it. It owns
   the paper's shape + shadow, since the art on top is mostly transparent. */
.pdf-hero__sheet {
  display: block;
  position: relative;
  aspect-ratio: 612 / 792;           /* matches the cover art's viewBox */
  background: #fff;                  /* paper, if the canvas can't paint */
  box-shadow: 0 4px 70px 0 rgba(0, 0, 0, 0.1);
}

/* The colour field. Its backing store is small and stretched to fit — see
   js/cover-mesh.js; the field is all soft gradients, so the upscale is free. */
.pdf-hero__mesh {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Same trick as the page mesh (js/mesh-bg.js): a touch of saturation back,
     since averaging blobs together pulls every colour toward the white base. */
  filter: saturate(108%);
}

.pdf-hero__cover {
  position: relative;                /* over the mesh */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 612 / 792;
  object-fit: cover;
}

/* The hover response is the mesh coming to life and nothing else — the sheet
   itself doesn't move. (cover-mesh.js holds its field still under
   prefers-reduced-motion.) */

.pdf-hero__caption {
  display: block;
  margin-top: clamp(20px, 3vw, 40px);
  text-align: center;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.3;
}

.pdf-hero:hover .pdf-hero__caption {
  text-decoration: underline;
}

/* ---- intro body copy: cols 2-4 (Figma 36px Inter Regular) ---- */
.pdf-body {
  grid-column: 2 / 5;
  margin: clamp(48px, 7vw, 96px) 0 0;   /* first para: gap from the hero above */
  font-size: var(--fs-body);         /* clamp(22px, 2.6vw, 36px) */
  line-height: 1.28;
}
/* Between consecutive paragraphs, one line of text high (matches line-height),
   not the larger hero gap. */
.pdf-body + .pdf-body {
  margin-top: 1.28em;
}
/* Inline links in the body copy: underlined, same ink colour as the text. */
.pdf-body a {
  color: inherit;
  text-decoration: underline;
}
/* Credit lines (plain <p>: authors, DOI, citation) at the foot of the page.
   Generous space above so they read as separate footer notes, well clear of the
   body copy, not another body paragraph. */
.pdf-main > p:not(.pdf-body) {
  margin-top: 4em;
}
/* Being small print, the two notes sit side by side across the same 3-col
   measure: credits in column 2, the citation (with its DOI) spanning columns
   3-4 so the longer text has room. They're the trailing <p>s (the two intro
   paragraphs are .pdf-body), so the nth-last-of-type ladder targets them without
   needing extra classes; auto placement drops both onto the same row. Scoped
   above 768px so they never fight the mobile override, which stacks them back
   into the single column. */
@media (min-width: 769px) {
  .pdf-main > p:not(.pdf-body):nth-last-of-type(2) { grid-column: 2; }      /* credits: 1 col */
  .pdf-main > p:not(.pdf-body):nth-last-of-type(1) { grid-column: 3 / 5; }  /* cite + DOI: 2 cols */
}

/* The footer bar itself lives in the shared css/site-footer.css + js/site-footer.js. */

/* ---- small screens: collapse the content grid to one column ----
   Matches home.css, which drops the 5-col grid to a single column ≤768px. */
@media (max-width: 768px) {
  .pdf-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdf-main > * {
    grid-column: 1;
  }
}