@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');

:root {
  color: #2A271F;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

figure {
  margin: 0;
}

img, video{
  height: auto;
  width: 100%;
}

h1, h2, h3, h4, h5 {
  margin-block: 0;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

a,
a:visited {
  font-weight: 700;
  color: #00708A;
}

a:hover {
  color: #003E4D;
}

h1 {
  font-size: max(min(4.5rem, 11.25vw), 2rem);
}

h1 .sub {
  display: block;
  font-size: max(min(1rem, 2.5vw), .75rem);

}
h2 {
  font-size: max(min(3rem, 7.5vw), 1.75rem);
  font-weight: 700;
}
h3 {
  font-size: max(min(2.25rem, 5.625vw), 1.5rem);
  font-weight: 700;
}
h4 {
  font-size: max(min(1.5rem, 3.75vw), 1rem);
  font-weight: 700;
}
h5 {
  font-size: max(min(1rem, 2.5vw), .75rem);
  font-weight: 700;
}

ol, ul {
  margin-block: 0;
}

p, li {
  font-size: max(min(1.5rem, 3.75vw), 1rem);
}

p {
  margin-block-start: 0;
}

section {
  min-height: 768px;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
section#intro {
  background: #F3F5F6;
}
section#dovetail {
  background: #E4EBEC;
}

section#dovetailnav {
  background: #C8DADC;
}
section#experiencesearch {
  background: #E4EBEC;
}

@media (min-width: 640px) {


  section#intro h1 {
    display:inline-block;
    white-space: nowrap;
    margin-block-end: 1rem;
  }

  section#intro article {
    width: min-content;
    margin: 0 auto;
  }

  section#dovetail {
    padding: 128px 64px;
  }

  section#dovetail article {
    display: grid;
    grid-template-areas: "head figures"
                         "content figures";
    gap: 2rem 4rem;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: min-content 1fr;

  }

  section#dovetail article hgroup{
    grid-area: head;

  }

  section#dovetail article .content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  section#dovetail article .content div p:last-of-type {
    margin-block-end: 0;
  }

  section#dovetail article .figures {
    grid-area: figures;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }


  section#dovetailnav {
    padding: 128px 64px;
  }

  section#dovetailnav article {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  section#dovetailnav article div.overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }


  section#dovetailnav article div.initialStates {
    display: grid;
    grid-template-areas: "head head" "dealcloud oneplace";
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  section#dovetailnav article div.initialStates h2 {
    grid-area: head;
  }
  section#dovetailnav article div.initialStates div.dealcloud {
    grid-area: dealcloud;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  section#dovetailnav article div.initialStates div.oneplace {
    grid-area: oneplace;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }


  section#dovetailnav article div.process {
    display: grid;
    grid-template-areas: "head head head" "data-fig data data" "intuition-fig intuition intuition";
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }

  section#dovetailnav article div.process figure.data-fig {
    grid-area: data-fig;
  }
  section#dovetailnav article div.process div.data {
    grid-area: data;
  }
  section#dovetailnav article div.process figure.intuition-fig {
    grid-area: intuition-fig;
  }
  section#dovetailnav article div.process div.intuition {
    grid-area: intuition;
  }

  section#dovetailnav article div.approaches {
      display: flex;
      flex-direction: column;
      gap: 1rem;

  }

  section#dovetailnav article div.approaches div.global-nav figure,
  section#dovetailnav article div.approaches div.detail-nav {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2rem;
  }

  section#experiencesearch {
    padding: 128px 64px;
  }
  section#experiencesearch article {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  section#experiencesearch article div.background {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem 2rem;
    grid-template-areas: "head head" "figure content" "roles roles";

  }
  section#experiencesearch article div.background h2 {
    grid-area: head;
  }
  section#experiencesearch article div.background figure {
    grid-area: figure;
  }
  section#experiencesearch article div.background ul {
    grid-area: content;
  }
  section#experiencesearch article div.background div.userroles {
    grid-area: roles;
  }

  section#experiencesearch article div.discoveries {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: min-content 1fr;
    gap: 0 2rem;
    grid-template-areas: "head figure" "content figure";

  }
  section#experiencesearch article div.discoveries h4 {
    grid-area: head;
  }
  section#experiencesearch article div.discoveries figure {
    grid-area: figure;
  }
  section#experiencesearch article div.discoveries ul.content {
    grid-area: content;
  }



}

@media (max-width: 639px) {
  article {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    
  }
}