/* ------------------------------------------------------------------ */
/*  Homepage headings                                                   */
/*                                                                      */
/*  The homepage content sections previously carried no heading tags at */
/*  all - every line sat in a plain <p>. These rules restate the values */
/*  those elements computed to, so each new <h1>, <h2> and <h3> matches */
/*  the page's existing typography instead of rendering as a browser    */
/*  default heading. Same approach as the note in styles.css for the    */
/*  brand line. Nothing here changes the layout grids in styles.css.    */
/* ------------------------------------------------------------------ */


/* --- Group card (white): page h1 ---------------------------------- */
/*  Mirrors body > div.crypto_section > div:nth-child(2) p, one step
    down in size because the h1 runs longer than the old two-word
    section title it replaces. */
body > div.crypto_section > div:nth-child(2) > h1 {
  font-size: 2.1rem;
  line-height: 1.12;
  text-transform: uppercase;
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: rgb(0, 0, 0);
  margin: 0;
  margin-left: 5%;
  margin-bottom: 1rem;
}

@media only screen and (min-device-width: 1500px) {
  body > div.crypto_section > div:nth-child(2) > h1 {
    font-size: 2.7vw;
  }
}


/* --- Group card: section labels ----------------------------------- */
body > div.crypto_section > div:nth-child(3) > h2,
body > div.crypto_section > div:nth-child(4) > h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  margin: 0 0 0.75rem;
}

body > div.crypto_section > div:nth-child(4) > h2 {
  margin-top: 1rem;
}


/* --- Group card: the venture list that replaced the logo strip ---- */
body > div.crypto_section > div:nth-child(3) > p {
  width: 85%;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 0.9rem;
  padding-top: 0.7rem;
  border-top: dotted 1px rgba(0, 0, 0, 0.35);
}

body > div.crypto_section > div:nth-child(3) > p > a {
  color: rgb(0, 0, 0);
  font-weight: 600;
  text-decoration: underline dotted 1px rgba(0, 0, 0, 0.55);
  text-underline-offset: 3px;
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

body > div.crypto_section > div:nth-child(3) > p > a:hover {
  opacity: 0.55;
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}


/* --- Ventures card (black): section title ------------------------- */
/*  Mirrors body > div.capital_section > div:nth-child(3) p. */
body > div.capital_section > div:nth-child(3) > h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: 500;
  color: rgb(255, 255, 255);
  margin: 0;
  margin-bottom: 1rem;
}

@media only screen and (min-device-width: 1500px) {
  body > div.capital_section > div:nth-child(3) > h2 {
    font-size: 3.3vw;
  }
}


/* --- Ventures card: one h3 per venture ---------------------------- */
body > div.capital_section > div:nth-child(4) > h3,
body > div.capital_section > div:nth-child(5) > h3,
body > div.capital_section > div:nth-child(6) > h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  margin: 0;
}

body > div.capital_section > div:nth-child(4) > h3 {
  margin: 2rem 0 0.5rem;
}

body > div.capital_section > div:nth-child(4) > p {
  margin-top: 0;
}

body > div.capital_section > div:nth-child(5) > h3 {
  margin: 0 0 0.6rem;
  padding-left: 1rem;
}

body > div.capital_section > div:nth-child(6) > h3 {
  margin-top: 70%;
  margin-bottom: 0.4rem;
  text-align: right;
}

body > div.capital_section > div:nth-child(6) p {
  margin-top: 0;
}

body > div.capital_section > div:nth-child(4) > p a,
body > div.capital_section > div:nth-child(6) > p a {
  color: rgb(255, 255, 255);
  text-decoration: underline dotted 1px rgba(255, 255, 255, 0.7);
  text-underline-offset: 3px;
}


/* --- News band: gradient section title ---------------------------- */
/*  Mirrors body > div.featured-slide > div > p. */
body > div.featured-slide > div > h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 3.7rem;
  font-weight: 500;
  margin: 0;
  margin-left: 2rem;
}


/* --- News cards: article headlines -------------------------------- */
/*  Mirrors body > div.insights_slide > div > p:nth-child(1). */
body > div.insights_slide > div > h3:nth-child(1) {
  width: 100%;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.97rem;
  font-weight: 100;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: rgba(255, 255, 255, 0.7) 1px dashed;
  margin-bottom: 2rem;
}


/* ------------------------------------------------------------------ */
/*  Mobile - mirrors the matching @media block in styles.css           */
/* ------------------------------------------------------------------ */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 812px) {

  body > div.crypto_section > div:nth-child(2) > h1 {
    padding-top: 0;
    display: block;
    font-size: 1.6rem;
    line-height: 1.2;
    text-align: left;
    margin-left: 0;
    font-weight: 700;
    margin-bottom: 0;
  }

  body > div.crypto_section > div:nth-child(3) > h2,
  body > div.crypto_section > div:nth-child(4) > h2 {
    font-size: 0.9rem;
    margin-top: 1.5rem;
  }

  body > div.crypto_section > div:nth-child(3) > p {
    width: 100%;
  }

  body > div.capital_section > div:nth-child(3) > h2 {
    margin-top: 1.5rem;
    font-size: 2.9rem;
    font-weight: 300;
  }

  body > div.capital_section > div:nth-child(4) > h3 {
    margin: 0 0 0.5rem;
  }

  body > div.capital_section > div:nth-child(5) > h3 {
    padding-left: 0;
  }

  body > div.capital_section > div:nth-child(6) > h3 {
    margin-top: 0;
    text-align: left;
    padding: 1rem 1rem 0;
  }

  body > div.featured-slide > div > h2.text {
    font-size: 2.35rem;
    margin: 0;
  }

  body > div.insights_slide > div > h3:nth-child(1) {
    font-size: 1.6rem;
    font-weight: 500;
  }
}


/* ---------------------------------------------------------------------------
   crypto_section, mobile repair.

   Two pre-existing problems in this section surface once the partner logo
   strip is removed, because the block that used to sit at :nth-child(3) had
   its own !important mobile rule and the block that replaced it does not.

   1. The desktop rule for :nth-child(3) is declared AFTER the mobile media
      block (line ~1642 vs ~1575), so with equal specificity it wins at every
      width. Child 3 therefore keeps grid-area 2/1/4/2 on a phone and prints
      across children 6 and 7.
   2. grid-auto-rows (0.3fr min-content auto) repeats past the third row, and
      the fr rows size to the container rather than their content, so long
      copy overflows its row onto the block below.

   These live in home.css rather than styles.css because the section only
   appears on the homepage, and because home.css is loaded after styles.css —
   so these overrides win on load order as well as specificity.
   --------------------------------------------------------------------------- */

@media only screen and (max-width: 812px) {
  html body div.crypto_section {
    grid-auto-rows: min-content;
    row-gap: 2rem;
    padding: 2.5rem 1.25rem 3rem;
  }

  /* give every block its own row, in reading order */
  html body div.crypto_section > div:nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
  html body div.crypto_section > div:nth-child(6) { grid-area: 2 / 1 / 3 / 2; margin-left: 0; }
  html body div.crypto_section > div:nth-child(7) { grid-area: 3 / 1 / 4 / 2; margin-top: 0; margin-bottom: 0; }
  html body div.crypto_section > div:nth-child(3) {
    grid-area: 4 / 1 / 5 / 2;
    align-self: auto;
    margin-bottom: 0;
  }
  html body div.crypto_section > div:nth-child(4) { grid-area: 5 / 1 / 6 / 2; margin-left: 0; }
  html body div.crypto_section > div:nth-child(5) { grid-area: 6 / 1 / 7 / 2; }
  html body div.crypto_section > div:nth-child(1) { grid-area: 7 / 1 / 8 / 2; }

  /* let row-gap own the vertical rhythm instead of stacked margins */
  html body div.crypto_section > div > p { margin-top: 0; }
  html body div.crypto_section > div:nth-child(1) p { margin: 0 0 1rem; font-size: 1.15rem; }
  html body div.crypto_section > div:nth-child(5) p { margin: 0; }
  html body div.crypto_section > div:nth-child(7) p { padding-top: 0; margin: 0; }

  html body div.crypto_section > div > h2 {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  html body div.crypto_section > div > p,
  html body div.crypto_section > div:nth-child(6) > p {
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
  }

  html body div.crypto_section > div:nth-child(2) p {
    font-size: 1.7rem;
    line-height: 1.12;
    margin: 0;
  }

  /* the pinned quote keeps its rule, loses the oversized type */
  html body div.crypto_section > div:nth-child(4) p {
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.4rem;
    padding: 0.2rem 0 0.2rem 0.9rem;
  }

  /* black pill: was inheriting 16px body type at desktop padding and running
     past its column on a 375px screen */
  html body div.crypto_section > div:nth-child(4) > a {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 0.75rem 1.5rem;
    text-align: center;
  }

  html body div.crypto_section > div:nth-child(1) > div {
    width: fit-content;
    max-width: 100%;
  }
}