/* ---------------------------------------------------------------------------
   about_us_story.css — page stylesheet for /pages/about_us

   Two jobs:

   1. RESTATE, for the new heading tags, the exact values the equivalent <p>
      already computed to in styles.css / about_us.css, so the page gains a
      real heading outline without any element changing how it looks. This is
      the same approach already used for the homepage h1 in styles/styles.css
      ("It previously rendered as a plain <p>; these are the values it computed
      to, restated so the h1 looks identical.").

   2. Style the two blocks this page adds — the story timeline and the venture
      grid — in the existing black-panel / dashed-rule / #00e7b1 language.

   Loaded after about_us.css, so equal-specificity restatements win on order.
--------------------------------------------------------------------------- */


/* --- Hero ---------------------------------------------------------------- */
/* The hero display line is the page's single h1. about_us.css already sizes
   h1 alongside the display <p> at 5em/300; the group headline is a longer
   string, so it is stepped down here while keeping the same weight, colour
   and tracking the display line had. */

body > div.title_slide > div:nth-child(1) > h1 {
  font-size: 3.4em;
  font-weight: 300;
  margin: 0;
  color: white;
  letter-spacing: -2px;
  line-height: 1.04;
  font-family: inherit;
}

body > div.title_slide > div:nth-child(1) > p.lede {
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.65;
  color: #cfcfcf;
  margin: 1.75rem 0 0;
  max-width: 34rem;
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 812px) {
  body > div.title_slide > div:nth-child(1) > h1 {
    font-size: 2.2em;
    max-width: 100%;
    letter-spacing: -1px;
  }

  body > div.title_slide > div:nth-child(1) > p.lede {
    font-size: 0.9rem;
    max-width: 100%;
  }
}


/* --- .founded panels: the section headline is now an <h2> ---------------- */
/* Values copied from `.founded p:nth-child(2)` in about_us.css, including its
   two breakpoint overrides, so the h2 renders exactly as that <p> did. */

.founded h2:nth-child(2) {
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: 300;
  margin: 0 0 2rem;
  font-family: inherit;
  letter-spacing: normal;
  line-height: normal;
}

/* The uppercase strapline block already supports an h3 (`.founded
   div:nth-child(3) H3` in about_us.css); this keeps its size and spacing
   identical to the surrounding block instead of the browser default. */
.founded div:nth-child(3) h3 {
  font-size: inherit;
  font-weight: 200;
  font-family: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}

.founded p a {
  color: white;
  text-decoration: underline dotted rgba(255, 255, 255, 0.7) 1px;
  text-underline-offset: 2px;
}

@media only screen and (min-device-width: 800px) {
  .founded h2:nth-child(2) {
    grid-area: 1 / 2 / 2 / 4;
    font-size: 2.4rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-device-width: 1500px) {
  .founded h2:nth-child(2) {
    font-size: 3vw;
    width: 90%;
  }
}


/* --- "How we operate" panel ---------------------------------------------- */
/* Values copied from `body > div.jobs > p` and from the card title rule
   `body > div.jobs > div.job-grid > div > div > p` in about_us.css. */

body > div.jobs > h2 {
  font-size: 4em;
  margin: 0 80px 3rem 40px;
  align-self: center;
  justify-self: center;
  font-weight: lighter;
  letter-spacing: -2px;
  text-transform: uppercase;
  width: min-content !important;
  font-family: inherit;
  color: inherit;
  line-height: normal;
}

body > div.jobs > div.job-grid > div > div > h3 {
  font-size: 2rem;
  margin: 0;
  font-weight: 400;
  letter-spacing: -1px;
  grid-area: 1 / 1 / 2 / 4;
  justify-self: flex-start;
  font-family: inherit;
  color: inherit;
  text-transform: none;
  line-height: normal;
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 812px) {
  body > div.jobs > h2 {
    margin: 2rem 0 6rem;
  }
}


/* --- Core values --------------------------------------------------------- */
/* Values copied from `body > div.core_values > p:nth-child(1)` in
   about_us.css (the !important weight there wins, so 800 is the real value). */

body > div.core_values > h3:nth-child(1) {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-family: inherit;
  letter-spacing: normal;
  line-height: normal;
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 812px) {
  body > div.core_values > h3:nth-child(1) {
    font-size: 2em;
    padding-top: 2rem;
    margin: 0;
  }
}


/* --- News teaser --------------------------------------------------------- */
/* Values copied from `body > div.news_insights_title > p.text` in
   about_us.css and `body > div.insights_slide > div > p:nth-child(1)` in
   styles.css, including their mobile overrides. */

body > div.news_insights_title > h2.text {
  margin: 0;
  color: white;
  letter-spacing: -4px;
  font-size: 5em;
  font-weight: 300;
  font-family: inherit;
  text-transform: none;
  line-height: normal;
}

body > div.insights_slide > div > h3:nth-child(1) {
  color: white;
  width: 100%;
  font-size: 1.97rem;
  font-weight: 100;
  text-transform: uppercase;
  margin: 0 0 2rem;
  padding-bottom: 0.5rem;
  border-bottom: rgba(255, 255, 255, 0.7) 1px dashed;
  font-family: inherit;
  letter-spacing: normal;
  line-height: normal;
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 812px) {
  body > div.news_insights_title > h2.text {
    font-size: 3.5em !important;
  }

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


/* --- Story timeline (new block) ------------------------------------------ */
/* Built in the same language as the .jobs panel: black ground, dashed white
   rules between rows, light display type, #00e7b1 markers. */

.story-timeline {
  position: relative;
  margin: 0 1rem 3rem;
  padding: 3rem 0 1rem;
  background-color: #000000;
  color: white;
  box-shadow: 0 0 2rem #00e7b129;
}

.story-timeline > h2 {
  font-size: 2.4rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 0 1rem 1rem;
  font-family: inherit;
  line-height: normal;
}

.story-timeline > p.story-intro {
  font-size: 0.9rem;
  font-weight: lighter;
  line-height: 1.6;
  opacity: 0.6;
  margin: 0 1rem 2.5rem;
  max-width: 620px;
}

.story-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-list > li {
  border-top: rgba(255, 255, 255, 0.7) dashed 1.5px;
  padding: 1.25rem 0 1.5rem;
  margin: 0 1rem;
}

.story-list > li:last-child {
  border-bottom: rgba(255, 255, 255, 0.7) dashed 1.5px;
}

.story-list h3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 0 0 0.6rem;
  font-family: inherit;
  line-height: normal;
}

.story-list h3 svg {
  fill: #00e7b1;
  margin-right: 0.6rem;
  flex: none;
}

.story-list p {
  font-size: 1rem;
  font-weight: lighter;
  line-height: 1.6;
  opacity: 0.6;
  margin: 0;
  max-width: 800px;
}

.story-list a {
  color: white;
  text-decoration: underline dotted rgba(255, 255, 255, 0.7) 1px;
  text-underline-offset: 2px;
}

@media only screen and (min-device-width: 800px) {
  .story-timeline {
    margin: 0 40px 3rem;
    padding: 3rem 3rem 1.5rem;
  }

  .story-timeline > h2 {
    font-size: 3rem;
    margin: 0 0 1rem;
  }

  .story-timeline > p.story-intro {
    margin: 0 0 3rem;
  }

  .story-list > li {
    display: grid;
    grid-template-columns: 0.9fr 2fr;
    grid-column-gap: 2rem;
    margin: 0;
    padding: 1.5rem 0 2rem;
  }

  .story-list h3 {
    font-size: 1.6rem;
    align-items: flex-start;
    margin: 0;
  }

  .story-list h3 svg {
    margin-top: 0.55rem;
  }
}


/* --- Venture grid (new block) -------------------------------------------- */
/* Card treatment mirrors the news cards in styles.css: black card, dashed
   rule under the title, small dotted-underline link at the foot. */

.venture-grid {
  position: relative;
  margin: 0 1rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 1rem;
}

.venture-card {
  background-color: #000000;
  color: white;
  padding: 25px 30px 20px;
  display: flex;
  flex-direction: column;
}

.venture-card .venture-kicker {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0.8rem;
  font-weight: lighter;
  opacity: 0.9;
  margin: 0 0 1rem;
}

.venture-card .venture-kicker svg {
  fill: white;
  margin-right: 0.5rem;
}

.venture-card h3 {
  font-size: 1.6rem;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: rgba(255, 255, 255, 0.7) 1px dashed;
  font-family: inherit;
  line-height: normal;
}

.venture-card p.venture-copy {
  font-size: 0.9rem;
  font-weight: lighter;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0 0 1.5rem;
}

.venture-card .venture-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.venture-card .venture-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 15px;
  color: white;
  opacity: 0.85;
  text-decoration: underline dotted rgba(255, 255, 255, 0.7) 1px;
  text-underline-offset: 2px;
}

.venture-card .venture-link + .venture-link {
  margin-top: 0.6rem;
  font-size: 13px;
  opacity: 0.7;
}

.venture-card .venture-link svg {
  fill: #00e7b1;
  margin-right: 10px;
  flex: none;
}

.venture-more {
  margin: 1.5rem 1rem 0;
  font-size: 0.9rem;
  font-weight: lighter;
  color: white;
  opacity: 0.8;
}

.venture-more a {
  color: white;
  text-decoration: underline dotted rgba(255, 255, 255, 0.7) 1px;
  text-underline-offset: 2px;
}

@media only screen and (min-device-width: 800px) {
  .venture-grid {
    margin: 0 40px 3rem;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 0;
  }

  .venture-card h3 {
    font-size: 1.97rem;
  }

  .venture-more {
    margin: 2rem 40px 0;
  }
}