/* =============================================================
   about.css — page-specific styles for the About page
   Shared tokens, header, footer, buttons, .icon-circle, .eyebrow,
   .section-head, .divider etc. live in style.css.
   All classes below are prefixed to avoid colliding with the
   homepage's hero/timeline/etc. classes.
   ============================================================= */

/* Serif display font + signature script font, scoped to this page only */
body.page-about h1,
body.page-about h2{
  font-family: 'Playfair Display', serif;
}

/* Eyebrow label followed by a short horizontal rule, e.g. "About Me ——" */
.eyebrow-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.eyebrow-row .eyebrow{ margin-bottom:0; }
.eyebrow-row .eyebrow-rule{
  flex:0 0 42px;
  height:1px;
  background: var(--gold);
}
.eyebrow-row.center{ justify-content:center; }

/* -------------------------------------------------------------
   1. ABOUT HERO ("About Me")
   ------------------------------------------------------------- */
.about-hero{
  position:relative;
  background: var(--cream);
  overflow:hidden;
  padding: 76px 0 96px;
}

.about-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:center;
}

.about-hero-copy h1{
  font-size: 2.6rem;
  font-weight:700;
  margin-bottom:22px;
}

.about-hero-copy > p{
  max-width:540px;
  margin-bottom:34px;
}

.about-features{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
}

.feature-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  max-width:170px;
}

.feature-icon{
  width:44px; height:44px;
  min-width:44px;
  border-radius:50%;
  background: var(--navy);
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
}

.feature-item h4{
  font-family: var(--font-body);
  font-size:.92rem;
  font-weight:700;
  color: var(--navy);
  margin-bottom:4px;
}
.feature-item p{
  font-size:.8rem;
  color: var(--text-muted);
  line-height:1.4;
}

/* Portrait side */
.about-hero-media{
  position:relative;
  display:flex;
  justify-content:center;
}

.about-photo-accent{
  position:absolute;
  right: 4%;
  bottom: -6%;
  width: 30%;
  height: 22%;
  border: 2px solid var(--gold);
  border-radius: 18px;
  z-index:0;
}

.about-photo-frame{
  position:relative;
  z-index:1;
  width: 88%;
  aspect-ratio: 4 / 4.6;
  background: var(--cream-arc);
  border-radius: 32px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.about-photo-frame img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
}

/* -------------------------------------------------------------
   2. MY STORY
   ------------------------------------------------------------- */
.my-story{ background: var(--bg); }

.story-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:start;
}

.story-copy h2{
  font-size:2rem;
  font-weight:700;
  margin-bottom:20px;
}
.story-copy p{ margin-bottom:16px; }

.signature{
  font-family: 'Dancing Script', cursive;
  font-size:1.7rem;
  color: var(--blue);
  margin-top:22px;
}

.story-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 30px 28px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.story-point{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.story-point .icon-circle{
  margin-bottom:0;
  width:46px; height:46px;
  min-width:46px;
  font-size:1.05rem;
}
.story-point h4{
  font-size:1rem;
  margin-bottom:4px;
}
.story-point p{ font-size:.9rem; }

/* -------------------------------------------------------------
   3. CORE VALUES
   ------------------------------------------------------------- */
.core-values{ background: var(--bg-tint); }

.values-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.value-card{
  text-align:center;
  padding: 10px 8px;
}
.value-card i{
  font-size:1.8rem;
  color: var(--gold);
  margin-bottom:16px;
  display:block;
}
.value-card h4{
  font-family: var(--font-body);
  font-size:.98rem;
  font-weight:700;
  color: var(--navy);
  margin-bottom:8px;
}
.value-card p{
  font-size:.82rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------
   4. EDUCATION TIMELINE
   ------------------------------------------------------------- */
.edu-timeline{ background: var(--bg); }

.timeline-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap: 20px;
  max-width: 900px;
  margin: 30px auto 0;
  padding: 0 40px;
}

/* dotted horizontal connector behind the icon circles */
.timeline-row::before{
  content:"";
  position:absolute;
  top: 74px;
  left: 6%;
  right: 6%;
  border-top: 2px dotted var(--gold);
  z-index:0;
}
/* small solid dots capping each end of the connector */
.timeline-row::after{
  content:"";
  position:absolute;
  top: 70px;
  left: calc(6% - 4px);
  width:8px; height:8px;
  border-radius:50%;
  background: var(--gold);
  box-shadow: calc(88% - 6%) 0 0 var(--gold);
}

.timeline-node{
  position:relative;
  z-index:1;
  flex:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.timeline-pill{
  display:inline-block;
  font-size:.76rem;
  font-weight:600;
  color: var(--navy);
  background: var(--blue-tint);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom:14px;
}
.timeline-pill.no-pill{
  background:none;
  color: var(--gold-dark);
  padding: 5px 0;
}

.timeline-icon{
  width:56px; height:56px;
  border-radius:50%;
  background: var(--navy);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  margin-bottom:16px;
}

.timeline-node h4{
  font-family: var(--font-body);
  font-size:.98rem;
  font-weight:700;
  color: var(--navy);
  margin-bottom:4px;
  padding: 0 6px;
}
.timeline-node p{
  font-size:.84rem;
  color: var(--text-muted);
}