/* =========================================================
   ABOUT PAGE — من هي شريفة؟
   Page-specific styles only. Shared brand/header/footer styles
   remain in assets/css/site.css.
   ========================================================= */

.about-page{
  background:#fdfbf8;
}

.about-page .main-nav a[aria-current="page"]{
  color:var(--purple);
  font-weight:800;
}

.about-hero{
  position:relative;
  min-height:clamp(590px,72vh,760px);
  overflow:hidden;
  background:#2d2230;
  isolation:isolate;
}

.about-hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 43%;
  z-index:-3;
}

.about-hero-shade{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(20,13,16,.06) 0%,rgba(31,18,30,.10) 40%,rgba(38,14,51,.55) 70%,rgba(42,12,57,.86) 100%),
    linear-gradient(0deg,rgba(22,12,20,.28),transparent 42%);
}

.about-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(209,169,69,.55),transparent);
}

.about-hero-inner{
  min-height:inherit;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.about-hero-copy{
  width:min(600px,52vw);
  padding:78px 0 72px;
  color:#fff;
  text-align:right;
}

.about-eyebrow{
  margin:0 0 16px;
  font-family:"Inter",sans-serif;
  direction:ltr;
  text-align:right;
  letter-spacing:.22em;
  font-size:12px;
  font-weight:700;
  color:#e3bd61;
}

.about-hero h1{
  margin:0 0 26px;
  font-size:clamp(42px,5.2vw,78px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.035em;
  text-shadow:0 5px 24px rgba(0,0,0,.18);
}

.about-hero blockquote{
  margin:0;
  max-width:560px;
  font-size:clamp(18px,1.75vw,25px);
  line-height:1.95;
  font-weight:500;
  color:rgba(255,255,255,.93);
}

.quote-credit{
  margin:11px 0 0;
  font-size:14px;
  font-weight:600;
  color:#e6c97f;
}

.about-reading{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,760px) minmax(0,1fr);
  padding-top:clamp(80px,10vw,138px);
  padding-bottom:clamp(90px,11vw,150px);
}

.about-reading-rule{
  grid-column:2;
  width:52px;
  height:1px;
  margin:0 auto 38px;
  background:var(--gold);
  opacity:.75;
}

.about-reading-copy{
  grid-column:2;
  text-align:center;
}

.about-reading-copy p{
  margin:0;
  font-size:clamp(22px,2.15vw,31px);
  line-height:2.05;
  font-weight:500;
  color:#3b2d3e;
}

.about-reading-copy p + p{
  margin-top:18px;
}

.about-bottom-cta{
  margin-top:8px;
  margin-bottom:6px;
}

.about-closing h2{
  font-size:clamp(25px,2.7vw,37px);
}

@media (max-width:900px){
  .about-hero{
    min-height:690px;
  }

  .about-hero-image{
    object-position:40% center;
  }

  .about-hero-shade{
    background:
      linear-gradient(0deg,rgba(40,14,53,.92) 0%,rgba(40,14,53,.72) 42%,rgba(30,17,28,.15) 72%,rgba(20,12,16,.05) 100%);
  }

  .about-hero-inner{
    align-items:flex-end;
  }

  .about-hero-copy{
    width:100%;
    max-width:680px;
    padding:0 0 54px;
  }

  .about-eyebrow{
    margin-bottom:10px;
  }

  .about-hero h1{
    margin-bottom:14px;
  }

  .about-hero blockquote{
    max-width:610px;
    line-height:1.8;
  }
}

@media (max-width:640px){
  .about-hero{
    min-height:640px;
  }

  .about-hero-image{
    object-position:42% center;
  }

  .about-hero-copy{
    padding-bottom:38px;
  }

  .about-hero h1{
    font-size:clamp(38px,12vw,54px);
  }

  .about-hero blockquote{
    font-size:17px;
  }

  .about-reading{
    padding-top:74px;
    padding-bottom:82px;
  }

  .about-reading-rule{
    margin-bottom:28px;
  }

  .about-reading-copy p{
    font-size:20px;
    line-height:2;
  }
}

/* Long-form editorial body */
.about-reading{
  grid-template-columns:minmax(0,1fr) minmax(0,720px) minmax(0,1fr);
}

.about-reading-copy{
  text-align:right;
}

.about-reading-copy p{
  font-size:clamp(17px,1.45vw,21px);
  line-height:2.05;
  font-weight:400;
  color:#3b2d3e;
}

.about-reading-copy p + p{
  margin-top:17px;
}

.about-question{
  font-weight:600 !important;
  color:var(--purple) !important;
}

.about-breath{
  width:1px;
  height:64px;
  margin:56px auto;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent);
  opacity:.7;
}

.about-statement{
  margin:58px 0 !important;
  text-align:center;
  font-size:clamp(26px,2.7vw,38px) !important;
  line-height:1.6 !important;
  font-weight:700 !important;
  color:var(--purple) !important;
}

.about-principle{
  position:relative;
  margin:72px 0;
  padding:46px 24px;
  text-align:center;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.5;
  font-weight:700;
  color:var(--purple);
}

.about-principle::before,
.about-principle::after{
  content:"";
  display:block;
  width:54px;
  height:1px;
  margin:0 auto;
  background:var(--gold);
  opacity:.8;
}
.about-principle::before{ margin-bottom:30px; }
.about-principle::after{ margin-top:30px; }

.about-cadence{
  margin-top:30px !important;
  margin-bottom:30px !important;
  line-height:2.25 !important;
  font-weight:600 !important;
  color:#4a3650 !important;
}

.about-closing-lines{
  margin-top:34px !important;
  text-align:center;
  font-size:clamp(20px,1.8vw,25px) !important;
  color:var(--purple) !important;
}

@media (max-width:640px){
  .about-reading{
    padding-top:62px;
    padding-bottom:76px;
  }
  .about-reading-copy p{
    font-size:16.5px;
    line-height:2;
  }
  .about-reading-copy p + p{
    margin-top:15px;
  }
  .about-breath{
    height:48px;
    margin:42px auto;
  }
  .about-statement{
    margin:46px 0 !important;
    font-size:27px !important;
  }
  .about-principle{
    margin:52px 0;
    padding:30px 12px;
    font-size:30px;
  }
}


/* =========================================================
   READING DENSITY PASS — 2026-07-27
   Smaller long-form type and tighter vertical rhythm.
   ========================================================= */
.about-reading{
  padding-top:clamp(54px,6vw,82px);
  padding-bottom:clamp(62px,7vw,96px);
}

.about-reading-rule{
  margin-bottom:24px;
}

.about-reading-copy p{
  font-size:clamp(15.5px,1.18vw,18px);
  line-height:1.82;
}

.about-reading-copy p + p{
  margin-top:10px;
}

.about-breath{
  height:38px;
  margin:30px auto;
}

.about-statement{
  margin:34px 0 !important;
  font-size:clamp(22px,2.15vw,30px) !important;
  line-height:1.55 !important;
}

.about-principle{
  margin:38px 0;
  padding:28px 18px;
  font-size:clamp(23px,2.35vw,32px);
  line-height:1.5;
}

.about-principle::before{ margin-bottom:20px; }
.about-principle::after{ margin-top:20px; }

.about-cadence{
  margin-top:18px !important;
  margin-bottom:18px !important;
  line-height:1.95 !important;
}

.about-closing-lines{
  margin-top:22px !important;
  font-size:clamp(17px,1.45vw,21px) !important;
}

@media (max-width:640px){
  .about-reading{
    padding-top:42px;
    padding-bottom:54px;
  }

  .about-reading-rule{
    margin-bottom:20px;
  }

  .about-reading-copy p{
    font-size:15px;
    line-height:1.78;
  }

  .about-reading-copy p + p{
    margin-top:8px;
  }

  .about-breath{
    height:30px;
    margin:24px auto;
  }

  .about-statement{
    margin:28px 0 !important;
    font-size:22px !important;
  }

  .about-principle{
    margin:30px 0;
    padding:22px 10px;
    font-size:24px;
  }

  .about-principle::before{ margin-bottom:16px; }
  .about-principle::after{ margin-top:16px; }

  .about-cadence{
    margin-top:14px !important;
    margin-bottom:14px !important;
    line-height:1.85 !important;
  }
}

/* About page: keep the three closing cards optically centered in the viewport. */
.about-bottom-cta{
  width:min(1180px,calc(100% - 48px));
  margin-left:auto !important;
  margin-right:auto !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  justify-content:center;
}

@media (max-width:900px){
  .about-bottom-cta{
    width:min(100% - 24px,680px);
    grid-template-columns:1fr;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}