/* ------------------------------
   Base Styles
--------------------------------*/
body, html {
  font-family: 'Playfair Display', serif; /* body text */
  color: black;
  margin: 0;
  padding: 0;
  line-height: 1.8;
}

/* ------------------------------
   Header / Archive Navigation
--------------------------------*/
main {
  padding-top: 50px; /* adds space at the top of the page */


}


.archive-header {
  display: flex;
  justify-content: space-between; /* name on left, links on right */
  align-items: flex-end;          /* aligns links to bottom of logo */
  padding: 20px 40px;
  border-bottom: 2px solid black;
  font-family: 'Roboto Mono', monospace; /* restore original archival feel */
}

.logo-link {
  text-decoration: none;
  color: black;
}

.logo-link:hover .logo {
  text-decoration: underline;
  cursor: pointer;
}

.logo {
  font-family: 'Roboto Mono', monospace; /* restore original font */
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
}

/* Archive links next to logo */
.archive-links {
  display: flex;
  gap: 30px;
}

.archive-link {
  font-family: 'Roboto Mono', monospace; /* match header style */
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid transparent;
  color: black;
}

.archive-link:hover {
  border-bottom: 1px solid black;
}

/* ------------------------------
   Statement / Main Content
--------------------------------*/
.statement-section {
  max-width: 750px;
  margin: 80px auto;
  padding: 0 20px;
  font-family: 'Playfair Display', serif; /* readable body text */
  line-height: 1.8;
  text-align: center; /* all in centre*/
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: 1px;
}

.statement-paragraph {
  margin-bottom: 50px; /* space between paragraphs */
}

.statement-paragraph p {
  font-size: 18px;
  font-family: 'Playfair Display', serif;
}

/* ------------------------------
   Section Links (like 35mm)
--------------------------------*/
.section-link {
  text-align: center;
  margin-top: 40px;  /* pushes it down from MFA WORK */
}

.section-link a {
  font-family: 'Italianno', cursive; /* can keep italics for section links if desired */
  font-size: 32px;
  text-decoration: underline;
  color: black;
}
/* ------------------------------
   Headings
--------------------------------*/
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif; /* keep headings readable */
}

/* ------------------------------
   Paragraph Styling
--------------------------------*/
p {
  font-family: 'Playfair Display', serif;
  line-height: 1.8;
  font-size: 18px;
}
/* ------------------------------
   Images - Desktop & Mobile
--------------------------------*/

/* ------------------------------
   Images
--------------------------------*/

.center-img {
  display: block;
  width: 40%;
  max-width: 450px;
  margin: 0 auto 90px auto;
  border: 2px solid black;
  box-sizing: border-box;
}

.image-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 90px;
}

.side-img {
  width: 300px;
  height: auto;
  border: 2px solid black;
  box-sizing: border-box;
}

/* ------------------------------
   Mobile layout
--------------------------------*/
@media (max-width: 768px) {

  .image-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;                 /* remove flex gap */
    margin-bottom: 5px;    /* space after a pair */
  }

  .center-img,
  .side-img {
    width: 85%;
    max-width: none;
    margin: 0 auto 25px auto;   /* THIS controls spacing */
  }

}