@font-face {
  font-family: "Cooper Hewitt";
  font-weight: 500;
  src: url(/fonts/CooperHewitt-Medium.otf);
}

@font-face {
  font-family: "Cooper Hewitt";
  font-weight: 400;
  src: url(/fonts/CooperHewitt-Book.otf);
}

@font-face {
  font-family: "Cooper Hewitt";
  font-weight: 300;
  src: url(/fonts/CooperHewitt-Light.otf);
}

@font-face {
  font-family: "Cooper Hewitt";
  font-weight: 200;
  src: url(/fonts/CooperHewitt-Thin.otf);
}

html {
  font-family: "Cooper Hewitt", sans-serif;
  background-color: hsl(178, 5%, 92%);
  color: #333;
  not-background-color: #496463;
}

body {
  margin: 0 0;
}

#hero {
  height: 300pt;
  background-color: #496463;
  color: white;
  text-shadow: 0 0 8px rgba(16, 16, 16, 80%);
  background: image-set(
    url(/images/hero1.1024.jpg) 1x,
    url(/images/hero1.2048.jpg) 2x
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 25% 40%;
  padding: 12pt 18pt;
  position: relative;
}

#hero h1, #hero h2 { z-index: 10; position: relative; }

#herofooter {
  backdrop-filter: opacity(0.6) blur(8px);
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 200pt;
  mask-image: linear-gradient( to bottom, transparent 0%, rgba(0,0,0,0.5) 10%,black 30% );
  z-index: 1;
}

h1 {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 48pt;
  margin: 0 0;
}

h2 {
  font-weight: 400;
  font-size: 22pt;
  margin:  8pt 0 0 0;
}

#albums {
  margin-top: 18pt;
  display: flex;
  flex-flow: wrap;
  color: #cdc;
}

.album .image {
  width: 240pt; height: 160pt;
  background-size: cover;
  overflow: hidden;
}

.album {
  display: inline-block; 
  margin: 0 0 12pt 12pt;
  /* border: 2px solid #a8c6c5; */
  border-radius: 6pt;
  position: relative;
  overflow: hidden;
}

.album h3 {
  margin: 0 0;
  padding: 8pt 0pt 6pt 0pt;
  xx-text-shadow: 0 0 8px rgba(16, 16, 16, 80%);
  font-size: 11pt;
  font-weight: 500;
  letter-spacing: 2%; 
  color: #111;
  text-transform: uppercase;
  xx-background: rgba(0, 0, 0, 75%);
}


.album h3 {
  xx-background: 
  linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0.6) 0%,
    hsla(0, 0%, 0%, 0.595) 8%,
    hsla(0, 0%, 0%, 0.581) 15.3%,
    hsla(0, 0%, 0%, 0.559) 22%,
    hsla(0, 0%, 0%, 0.529) 28.3%,
    hsla(0, 0%, 0%, 0.494) 34.1%,
    hsla(0, 0%, 0%, 0.453) 39.8%,
    hsla(0, 0%, 0%, 0.407) 45.4%,
    hsla(0, 0%, 0%, 0.358) 50.9%,
    hsla(0, 0%, 0%, 0.307) 56.6%,
    hsla(0, 0%, 0%, 0.254) 62.5%,
    hsla(0, 0%, 0%, 0.201) 68.8%,
    hsla(0, 0%, 0%, 0.148) 75.6%,
    hsla(0, 0%, 0%, 0.096) 83%,
    hsla(0, 0%, 0%, 0.046) 91.1%,
    hsla(0, 0%, 0%, 0) 100%
  ) !important;
}
.album .date { position: absolute; bottom: 6pt; right: 6pt; margin: 0 0; color: #777; font-weight: 400; }
.album .neighbourhood { position: absolute; bottom: 6pt; right: 6pt; margin: 0 0; display: none; }

.album .date, .album .neighbourhood { xx-text-shadow: 0 0 2px black; x-font-weight: 500; x-color: #ddd; font-size: 11pt; }

#album-202410-sydney-nightlife .image {
  background-image: url(/albums/202410-sydney-nightlife/_MG_D36112_p3_800_screen.jpg);
}

#album-202503-architecture-broken-hill .image {
  background-image: url(/albums/202503-architecture-broken-hill/_MG_D43025_p3_800_screen.jpg);
}

#album-202505-newtown-streets .image {
  background-image: url(/albums/202505-newtown-streets/_MG_D43905_p3_800_screen.jpg);
}

#album-202506-enmore .image {
  background-image: url(/albums/202506-enmore/_MG_D46360_p3_800_screen.jpg);
}

#album-202506-lindfield .image {
  background-image: url(/albums/202506-lindfield/_MG_D47452_p3_800_screen.jpg);
}

#album-202505-sydney-streets .image {
  background-image: url(/albums/202505-sydney-streets/_MG_D43487_p3_800_screen.jpg);
}

#album-202506-chippo-doggo .image {
  background-image: url(/albums/202506-chippo-doggo/_MG_D47113_p3_800_screen.jpg);
}

#album-202506-chatswood .image {
  background-image: url(/albums/202506-chatswood/_MG_D46643_p3_800_screen.jpg);
}

#album-202307-sydney .image {
  background-image: url(/albums/202307-sydney/_MG_D34462_p3_800_screen.jpg);
}

#album-202507-wynyard .image {
  background-image: url(/albums/202507-wynyard/_MG_D48149_p3_800_screen.jpg);
}

#album-202507-glebe-markets .image {
  background-image: url(/albums/202507-glebe-markets/_MG_D47904_p3_800_screen.jpg);
}

#album-202507-saturday-saunter .image {
  background-image: url(/albums/202507-saturday-saunter/_MG_D47974_p3_800_screen.jpg);
}

#album-202507-royal-np .image {
  background-image: url(/albums/202507-royal-np/_MG_D49198_p3_800_screen.jpg);
}

#album-202508-melbourne .image {
  background-image: url(/albums/202508-melbourne/_MG_D49609_p3_800_screen.jpg);
}

#album-202508-dreary-dulwich .image {
  background-image: url(/albums/202508-dreary-dulwich/_MG_D50640_p3_800_screen.jpg);
}

#album-202509-take-the-stage .image {
  background-image: url(/albums/202509-take-the-stage/_MG_D51530_p3_800_screen.jpg);
}

#album-202509-sydney-rain .image {
  background-image: url(/albums/202509-sydney-rain/_MG_D51849_p3_800_screen.jpg);
}

footer {
  margin: 48pt 12pt;
}
.album a .image {
  transform-origin: center; 
  transform: scale(1.00);
  border-radius: 6pt;
  /* TODO: crop in parent element */
  overflow: hidden;
  transition: transform 2000ms, filter 3000ms;

}
.album a:hover .image {
  transition: transform 3000ms, filter 1500ms;

  transform: scale(1.05);
  filter: brightness(1.20);
}

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