/* ––––––––––––––––––––––––––––––––––––––––– CSS Variables ––––––––––––––––––––––––––––––––––––––––– */

:root {
  --txt-color-bright: #f4eff0;
  --txt-color-dark: #100F0C;
  --txt-color-highlight: #2221ff;
  --txt-color-highlight-2: #FF6969;

  --c-background-bright: #F4F2EF;
  --c-background-dark: #100F0C;

  --font-Regular-body: "Riegla-Regular", Fallback, sans-serif;
  --font-Bold-headings: "Riegla-Bold", Fallback, sans-serif;
  --font-Italic-emphasised: "Riegraf-Italic", Fallback, sans-serif;

  /* ––––––––––––––––– Responsive Font Variables –––––––––––––––––  */
  --font-size-60: clamp(2rem, 3.8vw, 7rem);
  /* font-size: 60px; Was 1.8 rem as min. value*/
  --font-size-30: clamp(1.3rem, 1.8vw, 2.6rem);
  /* font-size: 30px; */
  --font-size-20: clamp(1rem, 1.25vw, 1.8rem);
  /* font-size: 20px; */
  --font-size-18: clamp(0.9rem, 1vw, 1.4rem);
  /* font-size: 18px; */
  --font-size-16: clamp(0.8rem, 0.8vw, 1.35rem);
  /* font-size: 16px; */

  --shadow: 0px 0px 50px rgba(104, 104, 104, 0.3);

  --font-size-huge: 60px;

  --border-radius: 4px;

}

::selection {
  background: var(--txt-color-highlight);
  color: var(--txt-color-bright);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Main HTML –––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  margin: 0px 0px;
  line-height: 1.3;
}

.btn {
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

.image {
  max-width: 100%;
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
}

.image_special {
  /* Tag for big process images -> NO SHADOW */
  width: 100%;
  max-width: 400%;
  border-radius: var(--border-radius);
}

.video {
  max-width: 100%;
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
}

html {
  box-sizing: border-box;
  /*     font-family: Arial, Helvetica, sans-serif; */
  font-family: var(--font-Regular-body);
  background-color: var(--c-background-bright);
}

.italic {
  font-family: var(--font-Italic-emphasised);
}

.bold {
  font-family: var(--font-Bold-headings);
}

.opacityLow {
  opacity: 0.6;
}

.opacityFull {
  opacity: 1 !important;
}

.highlight-1 {
  color: var(--txt-color-highlight);
}

.highlight-2 {
  color: var(--txt-color-highlight-2);
}

.darkText {
  color: var(--txt-color-dark);
}

.brightText {
  color: var(--txt-color-bright) !important;
}



/* ––––––––––––––––––––––––––––––––––––––––– Navigation ––––––––––––––––––––––––––––––––––––––––– */

.head {
  background-color: var(--c-background-bright);
  opacity: 1;
}

.head a {
  font-family: var(--font-Regular-body);
}

.main-nav {
  display: grid;
  grid-row-gap: 120px;
  grid-column-gap: 40px;
  list-style: none;
  grid-template-columns: repeat(12, 1fr);
  padding: 15px 0px 15px 0px;
}

.main-nav a {
  text-decoration: none;
  color: var(--txt-color-dark);
}

.main-nav a:hover {
  text-decoration: none;
  opacity: 1;
}

.link {
  grid-column: 2/4;
  font-size: var(--font-size-20);
  align-self: center;
}

.link1 {
  grid-column: 9;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 0.62;
}

.link2 {
  grid-column: 10;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 0.62;
}

.link3 {
  grid-column: 11;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 1;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Section: Top Container ––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.main-introduction {
  display: grid;
  grid-row-gap: 10px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  padding-top: 3em;
  background-color: var(--c-background-bright);
  padding-bottom: 0em;
}

.sentence {
  font-family: var(--font-Regular-body);
  grid-column: 2/11;
  grid-row: 1/7;
  font-size: var(--font-size-60);
  color: var(--txt-color-dark);
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  z-index: 10;
  /* letter-spacing: 0px; */
}

#boatpicture {
  position: relative;
  grid-column: 7/11;
  grid-row: 1/6;
  opacity: 0;
  z-index: 2;
  /* transform: rotate(-60deg); */
  transform: rotate(2deg);
}

.main-introduction figcaption {
  font-size: var(--font-size-20);
  color: var(--txt-color-highlight);
  font-weight: normal;
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  font-family: var(--font-Regular-body);
}

.introhover {
  font-family: var(--font-Italic-emphasised);
  /* color: var(--txt-color-highlight); */
  color: var(--txt-color-dark);
  cursor: pointer;
  border-bottom-color: var(--txt-color-highlight);
  display: inline-block;
  border-bottom: 3px solid currentColor;
  line-height: 0.85;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  /* text-decoration: underline; */
  /* transition: text-decoration 500ms ease; */
}

.introhover:hover {
  /* text-decoration: underline transparent; */
  border-bottom: 2px solid currentColor;
  border-bottom-color: var(--c-background-bright);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Section: Top Container ––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


h4 {
  font-family: var(--font-Italic-emphasised);
  /* font-size: 18px; */
  font-size: var(--font-size-20);
  font-weight: normal;
  /* font-weight: 600; */
  color: var(--txt-color-highlight);
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  transform: rotate(0deg);
}

.flag-italic {
  letter-spacing: 0.4px;
  font-family: var(--font-Italic-emphasised);
}

.arrow {
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-18);
}

.arrow2 {
  font-family: var(--font-Regular-body);
  font-size: 22px;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Section: Second Introduction ––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* –––––––––––––––––––––––––––––––––––––––––––––––––– Grids ––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.figure_Grid {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 14vh);
  margin-top: 8em;
  margin-bottom: 8em;
}

.figure_GridShort {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 14vh);
  margin-top: 8em;
  margin-bottom: 16em;
}


/* .second-introduction {
  display: grid;
  grid-row-gap: 60px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  background-color: var(--c-background-bright);
  padding-top: 2em;
  padding-bottom: 2em;
  opacity: 0;
} */

/* ––––––––––––––––––––––––––––––––––––––––– Article 1: How I Work –––––––––––––––––––––––––––––––––––––––––– */

.article1 p {
  margin-top: 0.1em;
}

.article1 {
  grid-column: 7/12;
  grid-row: 2/6;
  font-size: var(--font-size-30);
  /* font-size: 30px; */
  font-weight: normal;
  /* margin-top: 4em;
  margin-bottom: 2em; */
  padding-left: 1.8em;
}

#chi {
  /* grid-column: 2/6; */
  grid-column: 3/7;
  grid-row: 1/5;
  /* transform: translate(0em, 0em); */
  opacity: 1;
  align-self: center;
  margin: 0px;
}

#working {
  grid-column: 2/5;
  grid-row: 4/5;
  /* transform: translate(0em, 0em); */
  opacity: 1;
  align-self: center;
  margin: 0px;
}

.paraLink {
  color: var(--txt-color-dark);
  text-decoration: underline;
  transition: text-decoration 300ms ease;
}

.paraLink:hover {
  text-decoration: underline transparent;
}


/* ––––––––––––––––––––––––––––––––––––––––– Article 2: What I Love –––––––––––––––––––––––––––––––––––––––––– */


.article2 {
  grid-column: 7/12;
  grid-row: 2/6;
  font-size: var(--font-size-30);
  margin-bottom: 4em;
  padding-left: 1.8em;
}

/* ––––––––––––––––––––––––––––––––––––––––– List Style –––––––––––––––––––––––––––––––––––––––––– */

article ul {
  /* List Styling */
  list-style-position: outside;
  list-style-type: '→';
  margin-top: 0.6;
  padding-left: 0.7em;
  /* font-size: var(--font-size-20); */
  /* font-family: var(--font-Bold-headings); */
  font-family: var(--font-Regular-body);
  /* opacity: 0.65; */
  /* opacity: 0.80; */
}

article li {
  /* List elements */
  padding-inline-start: 0.8em;
  /* padding-inline-end: 4em; */
  margin-top: 0.8em !important;
  margin-bottom: 0.8em;
}


#kayak {
  grid-column: 2/5;
  grid-row: 2/4;
  opacity: 1;
  align-self: center;
  margin: 0px;
  /* padding: none; */
  z-index: 2;
}

#beach {
  grid-column: 3/6;
  grid-row: 4/6;
  /* transform: translate(0em, 0em); */
  opacity: 1;
  align-self: center;
  margin: 0px;
  /* padding: none; */
}

#wood {
  grid-column: 5/7;
  grid-row: 1/3;
  /* transform: translate(0em, 0em); */
  opacity: 1;
  align-self: center;
  margin: 0px;
  z-index: 4;
}


#montreal {
  grid-column: 2/6;
  grid-row: 1/3;
  /* transform: translate(0em, 0em); */
  opacity: 1;
  align-self: center;
  margin: 0px;
  /* padding: none; */
}

.article2 p {
  margin-top: 0.1em;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––– Section: Contact Me, Facts & Publications ––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––– Contact Me ––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.contact {
  display: grid;
  grid-row-gap: 0px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  background-color: var(--c-background-dark);
  padding-top: 2em;
  padding-bottom: 8em;
}

.contact-me {
  grid-column: 3/12;
  grid-row: 1;
  font-size: var(--font-size-60);
  color: var(--txt-color-bright);
  margin-top: 2em;
  margin-bottom: 2em;
}

.bigText {
  color: var(--txt-color-bright);
  text-decoration: none;
  font-family: var(--font-Regular-body);
}

.contactButton {
  display: inline-block;
  background: none;
  /* font-family: var(--font-Italic-emphasised); */
  font-family: var(--font-Regular-body);
  font-weight: normal;
  outline: none;
  cursor: pointer;
  font-size: var(--font-size-18);
  line-height: 20px;
  border-radius: 4px;
  padding: 13px 23px;
  margin-top: 14px;
  margin-right: 10px;
  transition: border 0.2s ease-out 0s, color 0.2s ease-out 0s;
  border: 1px solid #82807E;
  color: #82807E;
}

.contactButton:hover {
  border: 1px solid var(--c-background-bright);
  color: var(--c-background-bright);
}

.contact h4 {
  /* Caption */
  color: var(--txt-color-highlight-2);
  /* Tints all h4 headlines in this section (flags introducing chapter) into red*/
  font-size: var(--font-size-18);
  /* Relates roughly to 18px  */
}

.contact p {
  margin-top: 0;
  margin-bottom: 0;
}

/* ––––––––––––––––––––––––––––––––––––––––– Facts About Me –––––––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––– Styling –––––––––––––––––  */

.pFlag {
  font-size: var(--font-size-30);
  color: var(--txt-color-bright);
  /* font-family: var(--font-Italic-emphasised); */
  font-weight: normal;
  /* Relates roughly to 16px  */
  padding-block-start: 2em;
  padding-block-end: 0.6em;
  letter-spacing: 0.6px;
  opacity: 0.5;
  /* opacity: 1; */
}

.factsStyle {
  color: var(--txt-color-bright);
  font-size: var(--font-size-18);
  /* font-size: var(--font-size-20); */
  /* Relates roughly to 20px  */
  line-height: 1.4;
}

.factsBold {
  font-weight: normal;
  /* letter-spacing: 0.4px; */
  /* font-family: var(--font-Bold-headings); */
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-20);
  /* font-size: var(--font-size-18); */
  /* Relates roughly to 20px  */
  line-height: 1.4;
  margin-bottom: 0.4em !important;
}

.timeStamp {
  opacity: 0.4;
}

.factsEdu a {
  /* display: inline-block; */
  cursor: pointer;
  color: var(--txt-color-bright);
  transition: text-decoration 300ms ease;
}

/* .factsWork a {
  cursor: pointer;
  color: var(--txt-color-bright);
  transition: text-decoration 300ms ease;
  -webkit-text-decoration-color: rgba(245, 245, 245, 0.7);
  text-decoration-color: rgba(245, 245, 245, 0.7);
}

.factsWork a {
  cursor: pointer;
  color: var(--txt-color-bright);
  transition: text-decoration 300ms ease;
  -webkit-text-decoration-color: rgba(245, 245, 245, 0.7);
  text-decoration-color: rgba(245, 245, 245, 0.7);
} */

.factsBold a {
  /* display: inline-block; */
  cursor: pointer;
  color: var(--txt-color-bright);
  transition: text-decoration 300ms ease;
  /* text-decoration: red underline overline wavy; */
  -webkit-text-decoration-color: rgba(245, 245, 245, 0.7);
  /* Safari */
  text-decoration-color: rgba(245, 245, 245, 0.7);

}

/* ––––––––––––––––– Hover States –––––––––––––––––  */

.factsBold a:hover {
  text-decoration: underline transparent;
}



.heroLink:hover {
  text-decoration: underline transparent;
}

/* ––––––––––––––––– Facts Placement –––––––––––––––––  */

.factsFlag {
  grid-column: 3/5;
  grid-row: 2;
}

.factsEdu {
  grid-column: 6/9;
  grid-row: 3;
  /* justify-self: center; */
}

.factsWork {
  grid-column: 3/6;
  grid-row: 3;
}

.factsPersonal {
  grid-column: 9/12;
  grid-row: 3;
}

.factsViz {
  grid-column: 3/5;
  grid-row: 4;
}

.factsMotion {
  grid-column: 6/9;
  grid-row: 4;
  /* justify-self: center; */
}

.factsChat {
  grid-column: 9/12;
  grid-row: 4;
}


/* ––––––––––––––––––––––––––––––––––––––––– Publications –––––––––––––––––––––––––––––––––––––––––––––––– */


.publiGrid {
  display: grid;
  grid-row-gap: 0px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  background-color: var(--c-background-dark);
  padding-top: 4em;
  padding-bottom: 8em;
  grid-column: 1/13;
  grid-row: 7/11;
}


/* ––––––––––––––––– Publications Styling –––––––––––––––––  */

.publicTitle {
  font-family: var(--font-Bold-headings);
  /* font-weight: normal; */
  font-size: var(--font-size-20);
  /* Relates roughly to 18px  */
  align-content: center;
  color: var(--txt-color-bright);
  margin-top: 0.5em;
  padding-bottom: 0.2em;
  line-height: 1.4;
}

.publicMeta {
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-18);
  /* Relates roughly to 16px  */
  color: var(--txt-color-bright);
  align-content: center;
  margin-top: 0.5em;
  margin-bottom: 0em;
  line-height: 1.4;
  opacity: 0.6;
}

.authorName {
  font-family: var(--font-Bold-headings);
}

/* ––––––––––––––––– Publications Placement –––––––––––––––––  */

.publiHead {
  grid-column: 2/6;
  /* grid-row: 5/6; */
}

.publiFlag {
  grid-column: 2/6;
  grid-row: 5/6;
  margin-block-start: 4em;
  padding-block-start: 4em;
  padding-block-end: 0em;
}

.df-popup-thumb {
  width: auto !important;
}

/* ––––––––––––––––– IAI –––––––––––––––––  */

.publiIAI {
  grid-column: 4/8;
  grid-row: 7;
  align-self: center;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#IAI_pdf {
  grid-column: 2/4;
  grid-row: 7;
  align-self: start;
  max-width: 100%;
  padding-block-end: 2em;
  /* padding: 1.2em; */
}

/* ––––––––––– Memory Comnpas ––––––––––––  */


.publiMC {
  grid-column: 4/8;
  grid-row: 8;
  align-self: center;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#MC_pdf {
  grid-column: 2/4;
  grid-row: 8;
  align-self: start;
  padding-block-end: 2em;
  /* padding: 1.2em; */
}

/* ––––––––– Data Intermediaries ––––––––––  */

.publiDI {
  grid-column: 4/8;
  grid-row: 9;
  align-self: center;
  color: var(--txt-color-bright);
  font-family: var(--font-Regular-body);
  font-size: 20px;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#DI_pdf {
  grid-column: 2/4;
  grid-row: 9;
  align-self: center;
  /* padding: 1.2em; */
  padding-block-end: 2em;
}


/* –––––––––––– IAI Pictorial –––––––––––––  */

.publiIAI_PIC {
  grid-column: 4/8;
  grid-row: 10;
  align-self: center;
  color: var(--txt-color-bright);
  font-size: 20px;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#IAI_PIC_pdf {
  grid-column: 2/4;
  grid-row: 10;
  align-self: center;
  padding-block-end: 2em;
}

/* ––––––––––– Data Maker WS Paper –––––––––––  */

.publiDM_CHIWS {
  grid-column: 4/8;
  grid-row: 11;
  align-self: center;
  color: var(--txt-color-bright);
  font-family: var(--font-Regular-body);
  font-size: 20px;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#DM_CHIWS_pdf {
  grid-column: 2/4;
  grid-row: 11;
  align-self: center;
  padding-block-end: 2em;
}

/* ––––––––––– Jordans WIP Paper –––––––––––  */

.publiMC_WIP {
  grid-column: 4/8;
  grid-row: 12;
  align-self: center;
  color: var(--txt-color-bright);
  font-family: var(--font-Regular-body);
  font-size: 20px;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#MC_WIP_pdf {
  grid-column: 2/4;
  grid-row: 12;
  align-self: center;
  padding-block-end: 2em;
}


/* ––––––––––––––––––––––––––––––––––––––––– Workshops & Events –––––––––––––––––––––––––––––––––––––––––––––––– */

.factsWorkshops {
  grid-column: 9/12;
  grid-row: 1/11;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––– Footer ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.copyright {
  background-color: var(--txt-color-dark);
  display: grid;
  grid-row-gap: 120px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  padding-top: 2em;
  padding-bottom: 4em;
  color: var(--txt-color-bright);
}

.copyright p {
  grid-column: 5/9;
  text-align: center;
  font-size: var(--font-size-18);
}

.copyright a {
  text-decoration: underline;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  color: var(--txt-color-bright);
  transition: text-decoration 300ms ease;
}

.copyright a:hover {
  text-decoration: underline transparent;
  cursor: pointer;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (max-width: 768px) {


  /* ––––––––––––––––––––––––––––––––––––––––– Navigation ––––––––––––––––––––––––––––––––––––––––– */

  .main-nav {
    display: grid;
    grid-row-gap: 120px;
    grid-column-gap: 2.7vw;
    list-style: none;
    grid-template-columns: repeat(12, 1fr);
    padding: 15px 0px 15px 0px;
  }

  .link1 {
    grid-column: 7/8;
    text-align: right;
    align-self: center;
    opacity: 0.62;

  }

  .link2 {
    grid-column: 9/10;
    text-align: right;
    align-self: center;
    opacity: 0.62;

  }

  .link3 {
    grid-column: 11/12;
    text-align: right;
    align-self: center;
    opacity: 1;

  }

  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* ––––––––––––––––––––––––––––––––––––––––– Section: Top Container ––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .main-introduction {
    display: grid;
    grid-row-gap: 10px;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    background-color: var(--c-background-bright);
    padding-top: 0.8em;
    padding-bottom: 0em;
    /* opacity: 0; */
  }

  .sentence {
    grid-column: 2/12;
    grid-row: 1;
    /* margin-top: 0.5em;
  margin-bottom: 0.6em; */
    z-index: 1;
  }

  h4 {
    /* font-size: 18px; */
    font-size: var(--font-size-18);
    /* Relates roughly to 18px  */
    color: var(--txt-color-highlight);
    margin-top: 0.5em;
    margin-bottom: 0.6em;
    transform: rotate(0deg);
  }

  #boatpicture {
    position: relative;
    grid-column: 3/11;
    grid-row: 2;
    opacity: 1;
    z-index: 0;
    /* transform: rotate(-60deg); */
    transform: rotate(0deg);
    margin: 0px;
  }

  .main-introduction figcaption {
    font-size: var(--font-size-18);
    /* color: var(--txt-color-highlight); */
    color: var(--txt-color-dark);
    font-weight: normal;
    margin-top: 0.5em;
    margin-bottom: 0.6em;
    font-family: var(--font-Regular-body);
    opacity: 0.6;
  }


  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* ––––––––––––––––––––––––––––––––––––––––– Section: Second Introduction ––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

  /* –––––––––––––––––––––––––––––––––––––––––––––––––– Grids ––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .figure_Grid {
    display: grid;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    grid-column: 1/12;
  }

  .figure_GridShort {
    display: grid;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    margin-top: 2em;
    margin-bottom: 6em;
    grid-column: 1/12;
  }


  /* .second-introduction {
    grid-row-gap: 20px;
    grid-column-gap: 2.7vw;
    padding-top: 0em;
    padding-bottom: 2em;
    opacity: 0;
  } */

  /* ––––––––––––––––––––––––––––––––––––––––– Article 1: How I Work –––––––––––––––––––––––––––––––––––––––––– */


  .article1 p {
    margin-top: 0.1em;
  }

  .article1 {
    grid-column: 2/12;
    grid-row: 1;
    margin-top: 0em;
    margin-bottom: 0.6em;
    /* align-self: flex-start; */
    padding-left: 0em;
    height: fit-content;
  }

  #chi {
    /* grid-column: 2/6; */
    grid-column: 4/12;
    grid-row: 2/5 !important;
  }

  #working {
    grid-column: 2/8;
    grid-row: 4/6;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Article 2: What I Love –––––––––––––––––––––––––––––––––––––––––– */



  .article2 {
    grid-column: 2/12;
    grid-row: 1;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    padding-left: 0em;
  }
  
  /* ––––––––––––––––––––––––––––––––––––––––– List Style –––––––––––––––––––––––––––––––––––––––––– */
  
  article ul {
    /* List Styling */
    list-style-position: outside;
    list-style-type: '→';
    margin-top: 0.6;
    padding-left: 0.7em;
    /* font-size: var(--font-size-20); */
    /* font-family: var(--font-Bold-headings); */
    font-family: var(--font-Regular-body);
    /* opacity: 0.65; */
    /* opacity: 0.80; */
  }
  
  article li {
    /* List elements */
    padding-inline-start: 0.8em;
    /* padding-inline-end: 4em; */
    margin-top: 0.8em !important;
    margin-bottom: 0.8em;
  }
  
  
  #kayak {
    grid-column: 2/11;
    grid-row: 5/10;
    opacity: 1;
    align-self: center;
    margin: 0px;
    /* padding: none; */
    z-index: 2;
  }
  
  #beach {
    grid-column: 4/12;
    grid-row: 9/20;
    /* transform: translate(0em, 0em); */
    opacity: 1;
    align-self: center;
    margin: 0px;
    /* padding: none; */
  }
  
  #wood {
    grid-column: 6/12;
    grid-row: 2/6;
    /* transform: translate(0em, 0em); */
    opacity: 1;
    align-self: center;
    margin: 0px;
    z-index: 4;
  }
  
  
  #montreal {
    grid-column: 2/6;
    grid-row: 1/3;
    /* transform: translate(0em, 0em); */
    opacity: 1;
    align-self: center;
    margin: 0px;
    /* padding: none; */
  }
  
  .article2 p {
    margin-top: 0.1em;
  }




  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––– Section: Contact Me, Facts & Publications ––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .contact {
    grid-row-gap: 0px;
    grid-column-gap: 2.7vw;
    padding-top: 2em;
    padding-bottom: 8em;
  }

  .contact-me {
    grid-column: 2/12;
    grid-row: 1;
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .bigText {
    margin-bottom: 10em;
  }

  .contactButton {
    display: inline-block;
    background: none;
    /* font-family: var(--font-Italic-emphasised); */
    font-family: var(--font-Regular-body);
    font-weight: normal;
    outline: none;
    cursor: pointer;
    font-size: var(--font-size-18);
    line-height: 20px;
    border-radius: 4px;
    padding: 10px 20px;
    margin-top: 14px;
    margin-right: 10px;
    transition: border 0.2s ease-out 0s, color 0.2s ease-out 0s;
    border: 1px solid var(--c-background-bright);
    color: var(--c-background-bright);
    opacity: 0.75;
  }

  .contactButton:hover {
    border: 1px solid #F4F3F0;
    color: #F4F3F0;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Facts About Me –––––––––––––––––––––––––––––––––––––––––––––––––––––– */


  /* Headline on top of text*/

  .factsFlag {
    grid-column: 2/12;
    grid-row: 2;
  }

  .factsEdu {
    grid-column: 2/12;
    grid-row: 3;
  }

  .factsWork {
    grid-column: 2/12;
    grid-row: 4;
  }

  .factsPersonal {
    grid-column: 2/12;
    grid-row: 5;
  }

  .factsViz {
    grid-column: 2/12;
    grid-row: 6;
  }

  .factsMotion {
    grid-column: 2/12;
    grid-row: 7;
  }

  .factsChat {
    grid-column: 2/12;
    grid-row: 8;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Workshops & Events –––––––––––––––––––––––––––––––––––––––––––––––– */

  .factsWorkshops {
    grid-column: 2/12;
    grid-row: 1;
  }


  /* ––––––––––––––––––––––––––––––––––––––––– Publications & Events –––––––––––––––––––––––––––––––––––––––––––––––– */


.publiGrid {
  grid-column-gap: 2.7vw;
  margin-top: 0em;
  margin-bottom: 1.6em;
  grid-column: 1/13;
  grid-row: 9;
  padding-top: 0em;
  padding-bottom: 0em;
}

.publiHead {
  grid-column: 2/6;
  grid-row: 2;
}

/* ––––––––––––––––– Publications Styling –––––––––––––––––  */

.publicTitle {
  margin-top: 0.5em;
  padding-bottom: 0.4em;
  line-height: 1.4;
}

.publicMeta {
  margin-top: 0.5em;
  margin-bottom: 2.4em !important;
  line-height: 1.4;
  opacity: 0.6;
}

.authorName {
  font-family: var(--font-Bold-headings);
}


  /* ––––––––––––––––– IAI –––––––––––––––––  */

  #IAI_pdf {
    grid-column: 2/12;
    grid-row: auto;
    align-self: start;
    max-width: 100%;
    margin: 0px;
    padding-bottom: 0px;
    padding-top: 0.6em;
  }

  .publiIAI {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    padding-block-start: 0.6em;
    padding-block-end: 0em;
  }

  /* ––––––––––– Memory Comnpas ––––––––––––  */

  .publiMC {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    /* margin: 0px; */
    padding-block-start: 0.6em;
    padding-block-end: 0em;
  }

  #MC_pdf {
    grid-column: 2/12;
    grid-row: auto;
    align-self: start;
    padding-block-start: 0.6em;
    padding-block-end: 0em;
    margin: 0px;
  }
  /* ––––––––– Data Intermediaries ––––––––––  */

  .publiDI {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    padding-block-start: 0.6em;
    padding-block-end: 0em;
  }

  #DI_pdf {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    margin: 0px;
    padding-bottom: 0px;
    padding-top: 0.6em;
  }


  /* –––––––––––– IAI Pictorial –––––––––––––  */

  .publiIAI_PIC {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    padding-block-start: 0.6em;
    padding-block-end: 0em;
  }

  #IAI_PIC_pdf {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    margin: 0px;
    padding-bottom: 0px;
    padding-top: 0.6em;
  }

  /* ––––––––––– Data Maker WS Paper –––––––––––  */

.publiDM_CHIWS {
  grid-column: 2/12;
  grid-row: auto;
  align-self: center;
  padding-block-start: 0.6em;
  padding-block-end: 0em;
}

#DM_CHIWS_pdf {
  grid-column: 2/12;
  grid-row: auto;
  align-self: center;
  margin: 0px;
  padding-bottom: 0px;
  padding-top: 0.6em;
}

  /* ––––––––––– Jordans WIP Paper –––––––––––  */

  .publiMC_WIP {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    padding-block-start: 0.6em;
    padding-block-end: 0em;
  }

  #MC_WIP_pdf {
    grid-column: 2/12;
    grid-row: auto;
    align-self: center;
    margin: 0px;
    padding-bottom: 0px;
    padding-top: 0.6em;
  }



  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* ––––––––––––––––––––––––––––––––––––––––––––––– Footer ––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .copyright {
    display: grid;
    grid-row-gap: 120px;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    padding-top: 2em;
    padding-bottom: 1em;
    color: var(--txt-color-bright);
  }

  .copyright p {
    grid-column: 5/9;
    text-align: center;
  }

}