/* 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 {
  /* MUT ground is white; the cover's own blurred washes supply the colour. */
  --pdf-page-bg: var(--color-bg);

  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);
  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: var(--color-paper);    /* paper, if the canvas can't paint */
  box-shadow: 0 4px 70px 0 rgba(0, 0, 0, 0.14);
}

/* 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%;
  /* A touch of saturation back, since averaging the 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-family: var(--font-mono);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  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;
  }
}


/* ==========================================================================
   MUT typography layer (style-guide.pdf, "TYPOGRAPHY")
   The two intro paragraphs are the key message, so they take Editorial Old's
   stand-in at the largest size in view — the guide asks for the display serif
   to dominate its composition. The trailing credit/citation notes are
   apparatus and drop to Favorit Mono's stand-in.
   ========================================================================== */
.pdf-body {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.pdf-body a {
  text-decoration-thickness: from-font;
  text-underline-offset: 0.12em;
}
.pdf-main > p:not(.pdf-body) {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-quiet);
}
.pdf-main > p:not(.pdf-body) a { color: var(--color-ink); }
.pdf-main > p:not(.pdf-body) b { font-weight: 700; color: var(--color-ink); }