/* ============================================================
   ABOUT US — a slower, editorial layout: statement intro,
   a timeline of the shop's story, values, and a photo strip.
   Uses a blush-tinted section to feel distinct from the other
   pages while staying in the same brand family.
   ============================================================ */

.about-intro{
  max-width:800px; margin:0 auto; padding:70px 28px 50px; text-align:center;
}
.about-intro .eyebrow{
  font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--berry); margin-bottom:18px;
}
.about-intro h1{
  font-size:clamp(1.9rem, 4.5vw, 3rem); font-style:italic; line-height:1.2;
}
.about-intro p.lede{
  margin-top:22px; font-size:1.1rem; color:var(--choc-soft); line-height:1.7;
}

/* ---------- Timeline ---------- */
.timeline-section{ background:var(--blush); padding:60px 28px; }
.timeline{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:0; }
.timeline-item{
  display:grid; grid-template-columns:90px 1fr; gap:22px;
  padding:24px 0; border-bottom:1px solid rgba(61,43,31,0.15);
}
.timeline-item:last-child{ border-bottom:none; }
.timeline-year{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:700; color:var(--choc); }
.timeline-body h3{ font-size:1.1rem; margin-bottom:6px; }
.timeline-body p{ font-size:0.92rem; color:var(--choc-soft); line-height:1.6; }

/* ---------- Values ---------- */
.values-section{ max-width:var(--maxw); margin:70px auto; padding:0 28px; }
.values-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.values-head h2{ font-size:1.9rem; font-style:italic; }
.values-head p{ color:var(--choc-soft); margin-top:10px; }
.values-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.value-card{
  border:1px solid var(--line); border-radius:20px; padding:28px 24px;
  background:var(--paper);
}
.value-card .icon{ font-size:1.8rem; margin-bottom:14px; }
.value-card h3{ font-size:1.05rem; margin-bottom:8px; }
.value-card p{ font-size:0.88rem; color:var(--choc-soft); line-height:1.6; }

/* ---------- Photo strip ---------- */
.photo-strip{ max-width:var(--maxw); margin:0 auto 70px; padding:0 28px; }
.strip-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.strip-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; }
.strip-grid div:nth-child(2){ margin-top:24px; }
.strip-grid div:nth-child(4){ margin-top:-24px; }

/* ---------- Quote pull ---------- */
.pull-quote{
  max-width:700px; margin:70px auto; padding:0 28px; text-align:center;
}
.pull-quote p{
  font-family:'Fraunces',serif; font-style:italic; font-size:1.7rem; line-height:1.4; color:var(--choc);
}
.pull-quote .attribution{ margin-top:16px; font-size:0.85rem; font-weight:700; color:var(--choc-soft); font-family:'Work Sans'; font-style:normal; }

@media(max-width:820px){
  .values-grid{ grid-template-columns:1fr; }
  .strip-grid{ grid-template-columns:repeat(2, 1fr); }
  .strip-grid div:nth-child(2), .strip-grid div:nth-child(4){ margin-top:0; }
  .timeline-item{ grid-template-columns:70px 1fr; }
}