/* ==========================================================================
   about.css — styles specific to about.html
   ========================================================================== */

.page-header{
  padding:200px 6vw 40px;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}
.page-header .eyebrow{display:block; margin-bottom:16px;}
.page-header h1{
  font-style:italic;
  font-size:clamp(46px, 7vw, 84px);
  color:var(--gold-soft);
}

.about-section{background:var(--ink);}
.about-grid{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:.6fr 1.4fr;
  gap:80px; align-items:center;
}
.monogram{
  width:100%; max-width:280px; aspect-ratio:1;
  margin:0 auto;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2c231d, #14100d 70%);
  border:1px solid rgba(201,165,103,.35);
  box-shadow:0 0 0 10px rgba(201,165,103,.05), var(--shadow);
  position:relative;
}
.monogram span{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:88px;
  background:linear-gradient(180deg, #f4e3bd, var(--gold) 60%, #9c7237);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-copy .eyebrow{margin-bottom:16px; display:block;}
.about-copy h2{
  font-style:italic;
  font-size:clamp(34px, 4vw, 50px);
  margin-bottom:22px;
  color:var(--gold-soft);
}
.about-copy p{color:var(--parchment-dim); margin:0 0 18px; max-width:64ch;}
.about-quote{
  margin-top:28px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:23px;
  color:var(--parchment);
}
.about-quote span{
  display:block; margin-top:10px;
  font-family:'Cinzel', serif;
  font-style:normal;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-soft);
}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr; gap:50px; text-align:center;}
  .about-copy p{margin-left:auto; margin-right:auto;}
}




.monogram {
    width: 500px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

/* ========================================
   AUTHOR SECTION
======================================== */

.author-section {
  position: relative;
  min-height: 85vh;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 50%,
      rgba(150, 91, 35, 0.13),
      transparent 35%
    ),
    #0a0705;

  color: #eee1c8;
}

.author-bg {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 5, 3, 0.98),
      rgba(15, 10, 6, 0.92),
      rgba(7, 5, 3, 0.98)
    );

  z-index: 0;
}

.author-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 30% 50%,
      rgba(201, 165, 103, 0.07),
      transparent 30%
    );

  pointer-events: none;
}

/* Container */

.author-container {
  position: relative;
  z-index: 2;

  width: min(1100px, 88%);
  min-height: 85vh;

  margin: 0 auto;
  padding: 100px 0;

  display: grid;
  grid-template-columns: 0.8fr 1.2fr;

  align-items: center;

  gap: 90px;
}

/* ========================================
   AUTHOR IMAGE
======================================== */

.author-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.author-image-frame {
  position: relative;

  width: 330px;
  height: 420px;

  padding: 8px;

  border: 1px solid rgba(201, 165, 103, 0.5);

  background: rgba(201, 165, 103, 0.04);

  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(201, 165, 103, 0.08);
}

.author-image-frame::before {
  content: "";

  position: absolute;

  top: -12px;
  left: -12px;

  width: 70px;
  height: 70px;

  border-top: 1px solid #c9a567;
  border-left: 1px solid #c9a567;

  pointer-events: none;
}

.author-image-frame::after {
  content: "";

  position: absolute;

  right: -12px;
  bottom: -12px;

  width: 70px;
  height: 70px;

  border-right: 1px solid #c9a567;
  border-bottom: 1px solid #c9a567;

  pointer-events: none;
}

.author-image-frame img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    grayscale(15%)
    sepia(10%)
    brightness(0.9);

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

.author-image-frame:hover img {
  transform: scale(1.02);

  filter:
    grayscale(0%)
    sepia(5%)
    brightness(1);
}

/* ========================================
   AUTHOR TEXT
======================================== */

.author-content {
  max-width: 650px;
}

.author-eyebrow {
  display: block;

  margin-bottom: 18px;

  font-family: "Cinzel", serif;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.35em;
  text-transform: uppercase;

  color: #c9a567;
}

.author-content h2 {
  margin: 0;

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(48px, 6vw, 82px);

  font-weight: 500;
  font-style: italic;

  line-height: 0.95;

  color: #f1dfbd;
}

.author-content h2 span {
  color: #c9a567;
}

/* Gold divider */

.author-rule {
  width: 90px;
  height: 1px;

  margin: 30px 0;

  background: linear-gradient(
    90deg,
    #c9a567,
    transparent
  );
}

/* Intro paragraph */

.author-intro {
  font-family: "Cormorant Garamond", serif;

  font-size: 23px;
  line-height: 1.55;

  color: #e8dac1;

  margin-bottom: 20px;
}

/* Other paragraphs */

.author-content p:not(.author-intro) {
  max-width: 600px;

  margin: 0 0 16px;

  font-family: "EB Garamond", serif;

 
  line-height: 1.7;

  color: rgba(232, 218, 193, 0.72);
}

/* ========================================
   BUTTON
======================================== */

.author-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 22px;

  padding: 13px 28px;

  border: 1px solid rgba(201, 165, 103, 0.65);

  font-family: "Cinzel", serif;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  text-decoration: none;

  color: #e8d3a8;

  background: rgba(201, 165, 103, 0.06);

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.author-button:hover {
  color: #120d08;

  background: #c9a567;

  transform: translateY(-2px);

  box-shadow:
    0 8px 30px rgba(201, 165, 103, 0.2);
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 850px) {

  .author-container {
    grid-template-columns: 1fr;

    gap: 60px;

    padding: 90px 0;

    text-align: center;
  }

  .author-content {
    margin: 0 auto;
  }

  .author-rule {
    margin: 25px auto;
  }

  .author-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .author-image-frame {
    width: 280px;
    height: 350px;
  }
}

@media (max-width: 500px) {

  .author-container {
    width: 88%;
    padding: 70px 0;
  }

  .author-image-frame {
    width: 240px;
    height: 310px;
  }

  .author-content h2 {
    font-size: 48px;
  }

  .author-intro {
    font-size: 20px;
  }

  .author-content p:not(.author-intro) {
    font-size: 17px;
  }
}