/* Fonts */
@font-face {
  font-display: block;
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/cormorant-v21-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/cormorant-v21-latin-italic.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/cormorant-v21-latin-700.woff2") format("woff2");
}
@font-face {
  font-display: block;
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/cormorant-v21-latin-700italic.woff2") format("woff2");
}

/* Transitions */
@keyframes transition-in {
  from {
    opacity: 0;
    transform: rotateX(-10deg);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

/* General settings */
*,
*::after,
*::before {
  box-sizing: border-box;
}

a,
h1,
h2,
h3,
h4,
h5,
h6 {
  all: unset;
}

h1 {
  display: block;
  font-size: 200%;
}

h2 {
  font-size: 150%;
}

a {
  cursor: pointer;
}

a:not(:has(button)):hover,
a:not(:has(button)):focus,
.underline {
  text-decoration: underline;
}

/* If JavaScript is enabled, the image onload functions (that set opacity=1) will work;
   this means that we can start off with transparent images then fade them in */
@media (scripting: enabled) {
  .ease-load {
    opacity: 0;
    transition: all 0.25s ease;
  }
}

:root {
  --flexbox-gap: 20px;
  --border-radius: 4px;
  --foreground: #383b4b;
  --background: #dcd9d0;
  --bar-width: 30px;
  --bar-height: 2px;
  --burger-gap: 6px;
  --animation-timing: 200ms ease-in-out;
  --burger-height: calc(var(--bar-height) * 3 + var(--burger-gap) * 2);
}

body {
  color: var(--foreground);
  background-color: var(--background);
  font-family: "Cormorant", serif;
  -webkit-tap-highlight-color: transparent;
}

.spamspango,
.italic {
  font-style: italic;
}

/* Grid container */
.container {
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 30px;
  margin-bottom: 30px;
  gap: 60px;
  display: grid;
}

/* Header */
#header {
  display: flex;
  justify-content: space-between;
  text-underline-offset: 0.3em;
}

#title {
  font-size: 200%;
}

#navigation {
  display: flex;
  align-items: center;
  gap: var(--flexbox-gap);
  font-size: 150%;
}

.g-flower {
  width: 1.5em;
  height: 1.5em;
}

#navigation > label {
  display: none;
}

.burger-menu {
  --x-width: calc(var(--burger-height) * 1.41421356237);

  display: flex;
  flex-direction: column;
  gap: var(--burger-gap);
  width: max-content;
  cursor: pointer;
}

.burger-menu:has(input:focus-visible)::before,
.burger-menu:has(input:focus-visible)::after,
.burger-menu input:focus-visible {
  border: 1px solid var(--background);
  box-shadow: 0 0 0 1px var(--foreground);
}

.burger-menu::before,
.burger-menu::after,
.burger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--foreground);
  border-radius: 9999px;
  transform-origin: left center;
  transition:
    opacity var(--animation-timing),
    width var(--animation-timing),
    rotate var(--animation-timing),
    translate var(--animation-timing),
    background-color var(--animation-timing);
}

.burger-menu input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}

.burger-menu:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2);
}

.burger-menu:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2);
}

.burger-menu input:checked {
  opacity: 0;
  width: 0;
}

.sidebar {
  position: absolute;
  top: calc((50px + 30px + 8px));
  left: 0px;
  background-color: var(--background);
  /* border: 12px solid #a66969ae;
  border-radius: var(--border-radius); */
  visibility: collapse;
  width: 100%;
  height: 0px;
  opacity: 0;
  transition: all 0.25s;
  z-index: 100;
}

.sidebar > nav {
  margin-top: 25%;
  display: grid;
  gap: 20px;
  font-size: 175%;
  text-align: center;
}

.sidebar.active {
  visibility: visible;
  opacity: 1;
  height: 100%;
  overflow: hidden;
}

/* Mountain composite */
#petrichor-composite {
  animation: transition-in 0.75s;
  position: relative;
}

#composite-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--border-radius);
}

#composite-text {
  position: absolute;
  color: white;
  font-size: 300%;
  font-style: italic;
  font-weight: bold;
  text-align: center;
  width: max-content;
  max-width: calc(100% - (15px * 4));
  top: 42%;
  left: 50%;
  translate: -50% -50%;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

/* Mid section */
#mid-section {
  animation: transition-in 0.75s;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--flexbox-gap);
}

.prose {
  width: 40%;
  margin-left: 40px;
  margin-right: 40px;
  font-size: 150%;
}

.mid-section-image {
  width: 450px;
  height: 675px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

#behold-combo {
  display: grid;
  gap: 20px;
  justify-content: space-between;
}

#instagram-feed {
  width: 450px;
}

.image-placeholder {
  height: 0;
}

#bio-image {
  object-position: center 0%;
}

#footer {
  animation: transition-in 0.75s;
}

.footer-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

#scotland-river {
  object-position: center 70%;
}

/* Gallery */
#gallery {
  animation: transition-in 0.75s;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--flexbox-gap);
}

#gallery img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--border-radius);
}

button {
  all: unset;
  cursor: pointer;
  color: #ffffff;
  background-color: #a66969;
  border-radius: 30px;
  padding: 0.75em 1em;
  transition-duration: 150ms;
  margin-bottom: 10px;
}

button:hover {
  background-color: #a66969ae;
}

.contact-ul {
  list-style-type: none;
}

@media (max-width: 1600px) {
  #gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  h1 {
    font-size: 140%;
  }
  h2 {
    font-size: 120%;
  }
}

@media (max-width: 1000px) and (orientation: landscape) {
  .sidebar > nav {
    margin-top: 0%;
  }
}

@media (max-width: 1000px) {
  .container {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 30px;
  }

  #navigation {
    gap: 10px;
  }

  #navigation > label {
    display: flex;
  }
  #navigation > div {
    display: none;
  }

  #composite-text {
    font-size: 200%;
  }

  .prose {
    order: -1;
    width: 100%;
  }

  .mid-section-image {
    max-width: 340px;
    max-height: 510px;
  }
  #instagram-feed {
    max-width: 340px;
  }

  .contact-ul {
    padding-inline-start: 0.5em;
  }
}

@media (max-width: 600px) {
  #gallery {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }

  #gallery picture:nth-child(3) {
    order: 5;
  }
  #gallery picture:nth-child(4) {
    order: 6;
  }
  #gallery picture:nth-child(7) {
    order: 7;
  }
  #gallery picture:nth-child(8) {
    order: 8;
  }

  .footer-image {
    height: 200px;
  }
}

@media (max-width: 400px) {
  #title {
    width: 120px;
  }

  #composite-text {
    font-size: 150%;
  }

  .prose {
    margin-left: 5px;
    margin-right: 5px;
  }

  .mid-section-image {
    max-width: 280px;
    max-height: 420px;
  }
  #instagram-feed {
    max-width: 280px;
  }
}