/* style sheet  */

/* loading fonts */
@font-face {
    font-family: 'Inclinencre';
    src: url('assets/fonts/Inclinencre-SemiBoldItalic.otf') format('opentype');
}

@font-face {
    font-family: 'CatalogueLL';
    src: url('assets/fonts/CatalogueLL-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CatalogueLL';
    src: url('assets/fonts/CatalogueLL-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* colour of page */
body {
    background-color: rgb(252, 252, 252);
    margin: 0;
}

/* cento word mark */
.header {
  /* box-sizing: border-box; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(252, 252, 252, 0); /* last number = opacity */
  z-index: 1000;
  padding-top: 12px;
  padding-left: 20px;
}

.wordMark {
    text-decoration: none;
    font-size: 127px;
    color: rgb(3, 3, 3);
    font-family: 'Inclinencre';
    display: inline-block;
    line-height: 1;  /* Prevents extra space */
    vertical-align: middle; /* Ensures text is properly aligned */
    position: relative;
    padding: 0;  /* Remove unnecessary padding */
    margin: 0;  /* Remove any default margins */
 }

 a.wordMark {
  text-decoration: none;
  font-size: 127px;
  color: rgb(127, 127, 127); /* Grey like menu links */
  font-family: 'Inclinencre';
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  padding: 0;
  margin: 0;
  transition: color 0.2s ease; /* Smooth transition */
}

a.wordMark:hover {
  color: rgb(3, 3, 3); /* Black on hover */
}

.subheader {
    justify-content: left;
    padding-left: 20px;
    padding-top: 140px;
    margin-bottom: 0;
}

pre#projectTitlePre {
  display: flex;
  font-family: 'Inclinencre';
  margin: 0;
  padding: 0;
}

.projectTitle {
    text-decoration: none;
    font-size: 127px;
    color: rgb(3, 3, 3);
    font-family: 'Inclinencre';
    display: inline-block;
    line-height: 1;  /* Prevents extra space */
    vertical-align: middle; /* Ensures text is properly aligned */
    position: relative;
    padding: 0;  /* Remove unnecessary padding */
    margin: 0;  /* Remove any default margins */
}

/* main navigation bar */
.menu {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    padding-top: 87px;
    z-index: 1003;
}

/* hyperlink menu rules */
.word {
    text-decoration: none;
    color: rgb(127, 127, 127); /* Default grey */
    font-size: 14px;
    font-family: 'CatalogueLL';
    transition: color 0.2s ease; /* Smooth transition */
}

.word:hover {
    color: rgb(3, 3, 3); /* Black on hover */
}

/* Keep the active menu link black */
.word.active {
    color: rgb(3, 3, 3); /* Black for active page */
    pointer-events: none; /* Prevents clicking on the current page */
}

.caption {
  text-decoration: none;
  color: rgb(127, 127, 127);
  font-size: 10px;
  font-family: 'CatalogueLL';
  margin-bottom: 0px;
}

.noCaptionSpacer {
  text-decoration: none;
  color: rgb(252, 252, 252);
  font-size: 10px;
  font-family: 'CatalogueLL';
  margin-bottom: 0px;
}

.indexSpacer {
 padding-top: 100px;
}

pre {
  display: block;
  font-family: 'CatalogueLL';
  white-space: pre;
}

/* Media query for mobile devices in portrait mode */
@media (max-width: 800px) /* 768px recommended for mobile*/ {
    .menu {
    align-items: right;
    }
    .word {
    margin-bottom: 20px;
    }
}

/* Wrapper for columns */
.container {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding-left: 20px;
    padding-top: 30px;
    margin: 0;
}
.text-columns-container {
    width: 33%;
    height: 100%;
    margin: 0;
}

/* Each text column inside the container */
.text-column {
    margin-top: 0px;
    width: 100%;
    font-family: 'CatalogueLL', sans-serif;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
}

/* Image Column */
.image-column {
    z-index: 1002;
    margin-top: 0px;
    padding-left: 80px;
    width: 55%;
    display: flex;
    flex-direction: column;  /* Stack images vertically */
    align-items: left;
    padding-bottom: 0px;
}

/* Image sizing */
.image-column img {
    width: 99%;      /*image scaling within column */
    max-width: 100%;
    margin-top: 8px; /* image spacing */
    padding-bottom: 0px;
}

/* Remove bottom margin from the last image in the image column */
/* .image-column img:last-child { */
    /* margin-bottom: 0px; */
/* } */

/* Responsive adjustments for smaller screens */
@media (max-width: 800px) {

  pre#projectTitlePre {
    display: flex;
    font-family: 'Inclinencre';
    font-size: 47px;
    margin: 0;
    padding: 0;
  }

  .header {
    padding-left: 7px;
  }

  .subheader {
      padding-top: 59px;
      padding-left: 7PX;
  }

  .menu {
      padding-top: 26px;
  }

  .wordMark {
      font-size: 47px;
   }

   a.wordMark {
    font-size: 47px;
  }

    .container {
        flex-direction: column;
        padding-top: 17px;
        padding-left: 7px;
    }

    .text-columns-container,
    .image-column {
    z-index: 999;
    padding-left: 0;
    width: 100%;
    height: auto;  /* Remove fixed height for mobile layouts */
    /* padding-right: 7px; */
    overflow: visible;
    }

    .image-column img {
    z-index: 999;
    }

    .text-column {
    width: 95%;
    }

    .indexSpacer {
     padding-top: 50px;
    }
}