@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 900;
  src: url('/fonts-mwdev/bricolage-grotesque/BricolageGrotesque-VariableFont.ttf');
} 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
/*  outline: 1px solid red;  for visualising layout issues. */
}

body {
  color: saddlebrown;
  background-color: floralwhite;
}

a {
  color: saddlebrown;
  text-decoration: none;
}

a:hover {
  color: burlywood;
}

/* Home page: Top section */

/* Background and border formatting. This wraps around the grid below so that it extends when the size of the screen is changed, e.g. in landscape mode." */
.grid-wrapper {
  background-color: white;
  width: 98%;
  min-width: min-content;
  border-bottom: solid 2px saddlebrown;
  overflow-x: hidden;
  margin-left: 9%;
}

/* The main grid at the top of the home page containing latest pics (2026-05-12: I should rename this class, it's confusing me a bit.) */
.pic-text-grid {
  font-family: "Bricolage Grotesque";
  display: grid;
  grid-template-columns: 350px 10px 330px 330px 330px 330px;
  grid-template-rows: 220px 220px;
  align-items: center;
  justify-items: center;
  column-gap: 1rem;
  row-gap: 1rem;
  padding: 1rem;
  
}

.pic-text-grid img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: white;
}

.pic-text-grid img:hover {
  filter: sepia(1);
  cursor: pointer;
}

/* Select first pic. This was mainly used for padding/position but haven't needed it since changing some of the other layout. Keeping for now in case I break something again (likely).  */
.pic-text-grid img:nth-of-type(6) {

}

/* Select only the 6th, 7th and 8th image in the grid 
.pic-text-grid img:nth-of-type(1n+6) {
}
*/

.tiredscrolling {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.1rem;
  writing-mode: vertical-lr;
  align-self: center;
  justify-self: center;
}

/* Header/title banners */

.title-grid {
  font-family: "Bricolage Grotesque";
  display: grid;
  grid-template-columns: 130px 130px 120px 250px auto;
  grid-template-rows: auto auto auto;
  background-color: floralwhite;
  justify-items: center;
  margin-left: 8%;
}

.title-latest {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  justify-self: center;
  z-index: 1;
}

.title-latest img {
  width: 30px;
  margin: -1rem 5px 0 0;
}

.title-mike {
  font-size: 48px;
  grid-row: 1;
  grid-column: 1;
  line-height: 0.7;
  justify-self: right;
  align-self: center;
  margin: 2.5rem 0.5rem 1rem 0;

}

.title-buttons {
  font-size: 32px;
  grid-row: 1;
  grid-column: 2;
  line-height: .8;
  text-align: right;
  margin: 15px 0px 0px 0px;
}

.title-dials {
  font-size: 32px;
  grid-row: 2;
  grid-column: 3;
  line-height: 0.9;
  text-align: left;
  transform: rotate(-10deg);
  padding-left: 1rem;
}

.title-ampersand {
  font-size: 96px;
  margin: 5px 0px 0px 20px;
  grid-row: 1;
  grid-column: 3;
  line-height: .8;
  justify-self: left;
  align-self: start;
}

.title-period {
  font-size: 96px;
  grid-column: 3;
  grid-row: 2;
  line-height: 0.8;
  align-self: start;
  justify-self: right;
  padding: 0 0 1rem 0;
}

.title-links {
  grid-row: 1 / span 2;
  grid-column: 1;
  font-size: 2rem;
  line-height: 1.1;
  text-decoration: none;
  align-self: center;
  justify-self: right;
  text-align: right;
  padding: 5rem 1rem 0 0;
}

.lately span {
  grid-row: 1;
  grid-column: 5;
  display: flex;
  position: relative;
  flex-direction: row;
  align-self: start;
  justify-self: left;
  font-size: 20px;
}

.lately span img {
  z-index: 1;
  position: absolute;
  top: -20px;
  left: 60px;
  height: 40px;
}

/* Galleries page */

.galleries-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: "Bricolage Grotesque";
  align-items: center;
  justify-items: center;
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 800px;
  column-gap: 1rem;
  row-gap: 1rem;
  padding: 1rem;
}

.galleries-content {
  position: relative;
  justify-items: center;
  height: 220px;
}

.galleries-content:hover {
  cursor: pointer;
  filter: sepia(1);
}

.galleries-content img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.galleries-content .galleries-text {
  background-color: floralwhite;
  color: saddlebrown;
  filter: opacity(0.7);
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 0;
  text-align: left;
  padding: 0 0 0 .3rem;
  border-bottom: solid 2px saddlebrown;
}

.galleries-grid img:hover {

}

.galleries-grid h1 {
  grid-column: span 2;
  justify-self: left;
}

/* 
.cat-right img {
  grid-column: 2;
  max-width: 10vw;
}

2026-05-12: Need to think more about how I want this to be. Park for now. */

.cc-index {
  grid-row: 4;
  grid-column: 1 / 5;
  color: saddlebrown;
  background-color: floralwhite;
  font-family: "Bricolage Grotesque";
  font-size: .4em;
  padding: 20px;
  text-align: left;
}

.giles-index {
  grid-row: 1 / 5;
  grid-column: 4;
}

.giles-index img {
  width: 900px;
  color: saddlebrown;
  font-family: "Bricolage Grotesque";
  font-size: .6em;
  padding: 20px;
  flex-direction: column;
  justify-content: right;
}

/* All page */
.all-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: "Bricolage Grotesque";
  align-items: center;
  justify-items: center;
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 800px;
  column-gap: 1rem;
  row-gap: 1rem;
  background-color: white;
  padding: 1rem;
}

.all-grid img {
  
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.all-grid img:hover {
  cursor: pointer;
  filter: sepia(1);
}

.all-grid h1 {
  grid-column: span 2;
  justify-self: left;
}

/* Gallery pages */

/* This centers everything on the page and controls the margins. */
.page-wrapper { 
  max-width: 800px;
  margin-left: 9%;
  padding-top: 5rem;
}

.nav-title {
  font-size: 48px;
}

.nav-to-bottom {
  grid-row: 1;
  grid-column: 2;
  font-size: 20px;
  align-self: start;
  justify-self: right;
  margin: 0 3% 0 0;
}

.nav-to-bottom img {
  width: 30px;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.9fr auto 1fr 1fr 1fr 1fr;
  gap: 5px;
  cursor: pointer;
  background-color: white;
  padding: 20px;
}

.gallery-thumbs .gallery-info {
  grid-column: span 3;
  object-fit: cover;
  cursor: auto;
  background-color: floralwhite;
  font-family: "Bricolage Grotesque";
  font-size: 22px;
  margin: 20px -20px;
  padding: 10px 20px;
  border-top: solid 2px saddlebrown;
  border-bottom: solid 2px saddlebrown;
}

.gallery-location {
  font-size: 20px;
}

.gallery-date, .gallery-temp {
  font-size: 16px;
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs img:hover {
  filter: sepia(1);
}

.gallery-thumbs img:nth-child(1) {
  grid-column: span 3;
  object-position: 67%;
  filter: none;
}

.gallery-thumbs img:nth-child(3) {
  grid-row: span 2;
  object-position: 67%;
}

.gallery-thumbs img:nth-child(5) {
  object-position: 60%;
}

.gallery-thumbs img:nth-child(6) {
  grid-column: span 2;
}

.gallery-thumbs img:nth-child(7) {
  grid-column: span 2;
}

/* 2026-05-21: This is for testing a new way of doing what I'm doing for the gallery-thumbs class above. Will remove eventually if I decide to go ahead with it. */

.gallery-new {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.9fr auto;
  gap: 5px;
  cursor: pointer;
  background-color: white;
  padding: 20px;
}

.gallery-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-new img:hover {
  filter: sepia(1);
}

.gallery-new .gallery-info {
  grid-column: span 3;
  object-fit: cover;
  cursor: auto;
  background-color: floralwhite;
  font-family: "Bricolage Grotesque";
  font-size: 22px;
  margin: 20px -20px;
  padding: 10px 20px;
  border-top: solid 2px saddlebrown;
  border-bottom: solid 2px saddlebrown;
}

/* Modal for full view of pictures */

.modal-overlay {
  display: none;
  position: fixed;
  font-family: "Bricolage Grotesque";
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  z-index: 3; /* To place this at the highest level on the page. There are classes .lately, .lately-arr with z-index of 1. Nav-headers now have z=2 because of filters on images when scrolling. */
}

.modal-gallery-link { 

  color: burlywood;
  font-size: 1.3rem;
  position: absolute;
  bottom: 15px;
  right: 25px;
  filter: opacity(0.7);
}

.modal-overlay a:hover {
  filter: opacity(1);
}

.modal-overlay.active {
  display: flex;
}

.modal-img {
  max-width: 90vw;
  max-height: 90vh;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 2rem;
  color: burlywood;
  background: none;
  border: none;
  cursor: pointer;
  filter: opacity(0.7);
}

.modal-close:hover {
  filter: opacity(1);
}

.modal-thumbs {
/* For selection in the JS */
}

/* Navigation bars */

/* Home page navigation bar */
.home-nav-header {
  position: sticky;
  top: 0;
  background-color: floralwhite;
  width: 100%;
  min-width: max-content;
  z-index: 2;
}

.home-nav-header-content {
  display: flex;
  font-family: "Bricolage Grotesque";
  font-size: 1.5rem;
  background-color: floralwhite;
  height: 5rem;
  align-items: end;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 2px saddlebrown;
}

/* Rest of the pages navigation */
.nav-header {
  position: fixed;
  top: 0;
  background-color: floralwhite;
  width: 100%;
  z-index: 2;
}

.nav-header-content {
  display: flex;
  font-family: "Bricolage Grotesque";
  font-size: 1.5rem;
  background-color: floralwhite;
  height: 5rem;
  align-items: end;
  width: 800px;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 2px saddlebrown;
}

.commons {
  width: 1.5rem;
  margin: 1rem 0 0 5rem;
  position: relative;
  top: 0.3rem;
}

.nav-footer-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  align-items: end;
}

.nav-footer {
  font-family: "Bricolage Grotesque";
  font-size: 20px;
  background-color: floralwhite;
  border-top: solid 2px saddlebrown;
}

.active-page {
  color: burlywood;
}

.nav-footer img {
  width: 30px;
  margin-right: 1rem;
}

.nav-footer-menu {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  font-size: 20px;
  line-height: 1.5;
}

.nav-to-top {

  align-self: top;
  text-align: right;

}

.look {
  margin: 20px 0 0 0;
  grid-row: 2;
  grid-column: 1;
  font-size: 14px;
  justify-self: right;
}

.viewf {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: 20px 80px 20px;
  grid-template-rows: 20px 30px 20px;
  align-content: start;
  justify-items: center;
  font-family: "Bricolage Grotesque";
  font-size: 30px;
  filter: opacity(0.7);
}

.viewf-top-left {
  grid-row: 1;
  grid-column: 1;
}

.viewf-top-middle {
  grid-row: 1;
  grid-column: 2;
}

.viewf-top-right {
  grid-row: 1;
  grid-column: 3;
}

.focus-circle {
  grid-row: 2;
  grid-column: 2;
}

.viewf-bottom-left {
  grid-row: 3;
  grid-column: 1;
}

.viewf-bottom-middle {
  grid-row: 3;
  grid-column: 2;
}

.viewf-bottom-right {
  grid-row: 3;
  grid-column: 3;
}

/* Do this on screens less than 1700px wide (bigger than phones but smaller than widescreens)
@media (max-width: 1600px) {
  .pic-text-grid img:nth-of-type(5), .pic-text-grid img:nth-of-type(10) {
  display: none;
}
}

  2026-05-12: Parking for now, needs more work to reposition images that are not hidden */
  
  
/* Do this on screens less than 430px wide (most phones) */
@media (max-width: 440px) {

.home-nav-header {
  margin-left: 0;
}

.home-nav-header-content {
  width: 100%;
  padding: 0.5rem 0 0.5rem 1rem;
  height: 2.5rem;
  align-items: end;
}

.nav-header {
  margin-left: 0;
}

.nav-header-content {
  width: 100%;
  padding: 0.5rem 0 0.5rem 1rem;
  height: 2.5rem;
  align-items: end;
}

.galleries-grid {
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 0.5rem;
}

.galleries-content {
  grid-column: span 2;
}

.galleries-content:hover {
  filter: none;
}

.grid-wrapper {
  margin: 0px;
  height: 532px;
}

.title-grid {
  margin: 0px;
}

.page-wrapper { 
  margin: auto auto;
  padding-top: 2.5rem;
}

.pic-text-grid {
  grid-template-columns: calc(100vw - 45px) 10px;
  grid-template-rows: 220px 220px auto;
}

/* Hover kinda sucks on mobile. Don't do sepia filter. */

.pic-text-grid img:hover {
  filter: none;
}

.gallery-thumbs img:hover {
  filter: none;
}

.gallery-new img:hover {
  filter: none;
}

/* Set pic 5 to new position rather than just flowing as on larger devices */
 .pic-text-grid img:nth-of-type(6) {
    grid-column: 1;
    grid-row: 2;
  }
  
 .tiredscrolling {
    margin-right: 15px;
}

/* Make the images on all-photos page occupy one column only */

.all-grid {
  grid-template-columns: 1fr;
}

.all-grid img:hover {
  filter: none;
}

.all-grid h1 {
  grid-column: 1;
}

/* Hide these elements */
.pic-text-grid img:nth-of-type(2), .pic-text-grid img:nth-of-type(3), .pic-text-grid img:nth-of-type(4), .pic-text-grid img:nth-of-type(5), .pic-text-grid img:nth-of-type(1n+7), .lately, .lately-arr {
  display: none;
}
}