/* =========================================
   KENZIEPRINTS — ABOUT PAGE
   ========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #faf7f1;
  color: #655c55;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.8;
}

/* HEADER */

.about-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 7%;
  border-bottom: 1px solid #e8dfd6;
  background: #fffaf5;
}

.about-logo {
  color: #788a75;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-style: italic;
  text-decoration: none;
}

.about-home-link {
  color: #927b76;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.about-home-link:hover {
  color: #5f765d;
}

/* PAGE LAYOUT */

.about-page {
  width: min(100% - 40px, 850px);
  margin: 0 auto;
  padding: 85px 0 100px;
}

/* INTRODUCTION */

.about-intro {
  margin-bottom: 55px;
  text-align: center;
}

.about-eyebrow {
  margin-bottom: 15px;
  color: #899b83;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
}

.about-intro h1 {
  margin: 0;
  color: #806d65;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.25;
}

.about-subtitle {
  margin-top: 20px;
  color: #8a9b85;
  font-size: 21px;
  font-style: italic;
}

/* BRAND STORY */

.about-story {
  max-width: 720px;
  margin: 0 auto 65px;
  text-align: center;
}

.about-story p {
  margin: 0 0 25px;
  font-size: 18px;
  line-height: 2;
}

/* VISION SECTION */

.about-vision {
  padding: 50px 55px;
  border: 1px solid #e8ded5;
  border-radius: 20px;
  background: #f2ebe5;
  text-align: center;
}

.about-vision h2 {
  margin: 0 0 30px;
  color: #92716f;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.4;
}

.about-vision p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.9;
}

.about-vision p:last-child {
  margin-bottom: 0;
}

/* FOUNDER SIGNATURE */

.about-signature {
  margin-top: 65px;
  text-align: center;
}

.founder-name {
  margin: 0;
  color: #788a75;
  font-size: 27px;
  font-style: italic;
}

.founder-title {
  margin: 4px 0 0;
  color: #96867d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* MOBILE */

@media (max-width: 600px) {
  .about-header {
    padding: 18px 6%;
  }

  .about-logo {
    font-size: 24px;
  }

  .about-home-link {
    font-size: 9px;
    letter-spacing: 0.8px;
  }

  .about-page {
    padding: 55px 0 70px;
  }

  .about-story p {
    font-size: 16px;
  }

  .about-vision {
    padding: 35px 22px;
  }

  .about-vision p {
    font-size: 16px;
  }
}

/* =========================================
   ABOUT PAGE — ELEGANT BOTANICAL CORNERS
   ========================================= */

.about-page {
  position: relative;
  isolation: isolate;
}

.about-page::before,
.about-page::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 12px 34px at 35% 35%,
      rgba(126, 151, 121, 0.23) 0%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 13px 37px at 58% 48%,
      rgba(126, 151, 121, 0.19) 0%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 11px 31px at 30% 65%,
      rgba(126, 151, 121, 0.17) 0%,
      transparent 75%
    );

  opacity: 0.8;
}

.about-page::before {
  top: 25px;
  left: -100px;
  transform: rotate(-35deg);
}

.about-page::after {
  right: -100px;
  bottom: 20px;
  transform: rotate(145deg);
}

@media (max-width: 600px) {
  .about-page::before,
  .about-page::after {
    width: 90px;
    height: 90px;
  }

  .about-page::before {
    left: -15px;
  }

  .about-page::after {
    right: -15px;
  }
}

/* =========================================
   APPROVED ABOUT PAGE ARTWORK
   ========================================= */

.about-artwork-page {
  width: 100%;
  margin: 0;
  padding: 0;
}

.about-artwork {
  display: block;
  width: 100%;
  height: auto;
}

/* ABOUT PAGE — CLICKABLE HOME LINK */

.about-artwork-page {
  position: relative;
}

.about-artwork-home {
  position: absolute;
  top: 3.2%;
  right: 5%;
  z-index: 10;

  color: #9b6258;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;

  transition: color 0.25s ease;
}

.about-artwork-home:hover {
  color: #607b60;
}

.about-artwork-home:focus-visible {
  outline: 2px solid #607b60;
  outline-offset: 5px;
}

/* =========================================
   KENZIEPRINTS — RESPONSIVE ABOUT PAGE
   Desktop artwork stays unchanged
   ========================================= */

/* Hide mobile story on desktop */
.about-mobile-page {
  display: none;
}

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

  /* Hide desktop artwork and its HOME link */
  .about-artwork-page {
    display: none;
  }

  /* Show mobile story */
  .about-mobile-page {
    display: block;
    min-height: 100vh;
    padding-bottom: 55px;
    background: #faf7f1;
    color: #655c55;
    font-family: Georgia, "Times New Roman", serif;
  }

  /* Header */
  .about-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 6%;
    border-bottom: 1px solid #e8dfd6;
  }

  .about-mobile-logo {
    color: #788a75;
    font-size: 25px;
    font-style: italic;
    text-decoration: none;
  }

  .about-mobile-home {
    color: #927b76;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-decoration: none;
  }

  /* Introduction */
  .about-mobile-intro {
    padding: 55px 24px 30px;
    text-align: center;
  }

  .about-mobile-eyebrow {
    color: #899b83;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
  }

  .about-mobile-intro h1 {
    margin: 18px 0;
    color: #806d65;
    font-size: clamp(30px, 8vw, 40px);
    font-weight: 400;
    line-height: 1.25;
  }

  .about-mobile-subtitle {
    color: #8a9b85;
    font-size: 19px;
    font-style: italic;
  }

  /* Story */
  .about-mobile-story {
    padding: 15px 27px 35px;
    text-align: center;
  }

  .about-mobile-story p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.9;
  }

  /* Beige vision box */
  .about-mobile-vision {
    margin: 10px 20px 0;
    padding: 36px 24px;
    border: 1px solid #e8ded5;
    border-radius: 20px;
    background: #eee5d9;
    text-align: center;
  }

  .about-mobile-vision h2 {
    margin: 0 0 25px;
    color: #92716f;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.4;
  }

  .about-mobile-vision p {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.85;
  }

  .about-mobile-vision p:last-child {
    margin-bottom: 0;
  }

  /* Founder signature */
  .about-mobile-signature {
    padding: 45px 20px 15px;
    text-align: center;
  }

  .about-mobile-founder {
    margin: 0;
    color: #788a75;
    font-size: 28px;
    font-style: italic;
  }

  .about-mobile-founder-title {
    margin-top: 8px;
    color: #96867d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
}