/* ============================================================
   KHADIZA DREAMS — about.css
   Used only by: about.html (Our Story)
   Depends on: styles.css (tokens, buttons, section-head, footer)
   ============================================================ */


/* ============================================================
   1. BREADCRUMBS
   ============================================================ */
.crumbs{
  padding-block:24px;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.crumbs a{ transition:color .3s; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ margin-inline:9px; opacity:.45; }


/* ============================================================
   2. STORY HERO
   ============================================================ */
.story-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:clamp(480px, 68vh, 720px);
  background:var(--soft);
}

.story-hero__media{
  position:relative;
  overflow:hidden;
}

.story-hero__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.55) contrast(1.04);
}

.story-hero__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding:clamp(40px, 6vw, 104px);
}

.story-hero__title{
  font-size:clamp(34px, 5vw, 68px);
  font-weight:300;
  line-height:1.03;
  max-width:14ch;
}

.story-hero__title em{
  font-style:italic;
  color:var(--gold);
}

.story-hero__text{
  max-width:48ch;
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:var(--ink-soft);
}


/* ============================================================
   3. FOUNDER LETTER
   ============================================================ */
.letter{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
  padding-block:clamp(64px, 8vw, 120px);
}

.letter__portrait{
  position:relative;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:var(--soft);
  border-radius:var(--radius);
  margin:0;
}

.letter__portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.4) contrast(1.02);
}

.letter__portrait figcaption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  padding:12px 16px;
  background:rgba(255,253,251,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
}

.letter__body{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.letter__heading{
  font-size:clamp(28px, 3.6vw, 44px);
  font-weight:300;
  line-height:1.1;
  max-width:16ch;
}

.letter__heading em{
  font-style:italic;
  color:var(--gold);
}

.letter__text{
  max-width:52ch;
  font-size:15px;
  font-weight:300;
  line-height:1.85;
  color:var(--ink-soft);
}

.letter__signature{
  margin-top:8px;
  font-family:var(--font-display);
  font-size:26px;
  font-style:italic;
  color:var(--ink);
  line-height:1;
}

.letter__role{
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}


/* ============================================================
   4. TIMELINE
   ============================================================ */
.timeline{
  padding-block:clamp(64px, 8vw, 120px);
  background:var(--soft);
}

.timeline__list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(20px, 2.6vw, 44px);
  margin-top:clamp(30px, 4vw, 56px);
}

.timeline__item{
  position:relative;
  padding-top:34px;
  border-top:1px solid var(--line-dark);
}

.timeline__item::before{
  content:'';
  position:absolute;
  top:-5px;
  left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold);
}

.timeline__year{
  display:block;
  margin-bottom:12px;
  font-family:var(--font-display);
  font-size:clamp(26px, 3vw, 38px);
  font-weight:300;
  line-height:1;
  color:var(--gold);
}

.timeline__title{
  margin-bottom:8px;
  font-size:18px;
  font-weight:400;
}

.timeline__text{
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}


/* ============================================================
   5. VALUES
   ============================================================ */
.values{
  padding-block:clamp(64px, 8vw, 120px);
}

.values__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 3vw, 48px);
  margin-top:clamp(30px, 4vw, 56px);
}

.value{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(26px, 3vw, 44px);
  background:var(--soft);
  border-radius:var(--radius);
}

.value__icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--paper);
  color:var(--gold);
}

.value__icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.value__title{
  font-size:20px;
  font-weight:400;
}

.value__text{
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted);
}


/* ============================================================
   6. PROCESS STRIP
   ============================================================ */
.process-strip{
  padding-block:clamp(64px, 8vw, 120px);
  background:var(--ink);
  color:var(--paper);
}

.process-strip .eyebrow{
  color:rgba(255,253,251,.55);
}

.process-strip__title{
  margin-top:14px;
  color:var(--paper);
  font-size:clamp(30px, 4vw, 52px);
  font-weight:300;
  line-height:1.1;
  max-width:20ch;
}

.process-strip__list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(22px, 3vw, 48px);
  margin-top:clamp(36px, 5vw, 64px);
}

.process-step{
  padding-top:28px;
  border-top:1px solid rgba(255,253,251,.22);
}

.process-step__num{
  display:block;
  margin-bottom:14px;
  font-family:var(--font-display);
  font-size:clamp(30px, 3.4vw, 44px);
  font-weight:300;
  line-height:1;
  color:var(--gold-soft);
}

.process-step__title{
  margin-bottom:10px;
  font-size:19px;
  color:var(--paper);
}

.process-step__text{
  font-size:13.5px;
  line-height:1.8;
  color:rgba(255,253,251,.66);
  max-width:32ch;
}


/* ============================================================
   7. PULL QUOTE
   ============================================================ */
.pull-quote{
  padding-block:clamp(64px, 8vw, 120px);
  text-align:center;
}

.pull-quote__text{
  max-width:22ch;
  margin:0 auto 22px;
  font-family:var(--font-display);
  font-size:clamp(28px, 4vw, 52px);
  font-style:italic;
  font-weight:300;
  line-height:1.25;
  color:var(--ink);
}

.pull-quote__author{
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}


/* ============================================================
   8. STUDIO CTA
   ============================================================ */
.studio-cta{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:stretch;
  background:var(--soft);
}

.studio-cta__media{
  position:relative;
  overflow:hidden;
  min-height:380px;
}

.studio-cta__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.5) contrast(1.02);
}

.studio-cta__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:clamp(36px, 6vw, 88px);
}

.studio-cta__title{
  font-size:clamp(26px, 3.4vw, 44px);
  font-weight:300;
  line-height:1.1;
  max-width:16ch;
}

.studio-cta__text{
  max-width:42ch;
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-soft);
}

.studio-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}


/* ============================================================
   9. RESPONSIVE
   ============================================================ */

/* ---------- ≤ 1024px ---------- */
@media (max-width:1024px){
  .story-hero{ grid-template-columns:1fr; }
  .story-hero__media{ min-height:56vw; }
  .story-hero__body{
    padding:clamp(36px, 6vw, 64px) var(--gutter);
  }

  .letter{ grid-template-columns:1fr; }
  .letter__portrait{ max-width:520px; }

  .timeline__list{ grid-template-columns:repeat(2, 1fr); }

  .values__grid{ grid-template-columns:1fr; }

  .process-strip__list{ grid-template-columns:1fr; gap:32px; }

  .studio-cta{ grid-template-columns:1fr; }
  .studio-cta__media{ min-height:52vw; }
}

/* ---------- ≤ 560px ---------- */
@media (max-width:560px){
  .timeline__list{ grid-template-columns:1fr; }
  .letter__portrait{ max-width:100%; }
}