/* ==========================================================================
   Taq Ventures — About page styles
   Loaded after assets/styles.css on about.html
   ========================================================================== */

.about-hero{ padding: 84px 0 100px; }

/* Two sections: the company's story on its own, full measure, then the
   founder's perspective below it on a panel, with the photo beside it. The
   photo used to sit next to the company copy, where a picture of one person
   was carrying the company's story; it belongs with the part written in the
   first person. The column stays fixed and narrow so the photo supports the
   copy rather than outweighing it. */
.about-founder{
  padding: 84px 0 100px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.about-grid{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1000px){
  .about-grid{ grid-template-columns: 220px 1fr; gap: 40px; }
}
@media (max-width: 800px){
  .about-grid{ grid-template-columns: 1fr; gap: 36px; }
  .about-photo-wrap{ max-width: 260px; }
}

.about-eyebrow{
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 14px; margin-bottom: 24px;
}
.about-eyebrow .rule{ width: 28px; height: 2px; background: var(--accent-bright); }

.about-copy h1,
.about-copy h2{
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing: -0.01em;
  /* 14ch here was within a few pixels of the width of "Why Taq exists." in
     Barlow Condensed, so the headline broke after "Taq" at some viewport
     widths and held on one line at others — and when it broke it stranded a
     single word. Loosened enough to clear the current headline outright while
     still capping the measure for a longer one, which text-wrap: balance then
     splits evenly. */
  max-width: 18ch;
  margin-bottom: 28px;
}
.about-copy p{
  color: var(--muted);
  font-size: 17px;
  /* Widened from 56ch when the photo column shrank, so the copy takes up the
     width the picture gave back rather than leaving it empty. */
  max-width: 66ch;
  margin-bottom: 20px;
}
.about-copy p:last-child{ margin-bottom: 0; }
.about-copy h2{ font-size: clamp(28px, 4vw, 38px); }

/* The founder's sign-off: name over title, then the co-founder credit in the
   muted, smaller voice of a byline. */
.about-copy .founder-sign{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 28px;
  color: var(--text);
}
.founder-name{ font-weight: 600; font-size: 17px; }
.founder-title{ color: var(--muted); font-size: 15px; }
.about-copy .founder-credit{
  margin-top: 18px;
  font-size: 14px;
}
.about-copy .founder-credit a{ color: var(--accent); }
.about-copy .founder-credit:empty{ display: none; }

.about-photo-wrap img{
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
}

/* ---- mobile vertical rhythm: see the matching block in styles.css ---- */
@media (max-width: 640px){
  .about-hero,
  .about-founder{ padding: 40px 0 48px; }
  .about-eyebrow{ margin-bottom: 18px; }
  .about-copy h1,
  .about-copy h2{ margin-bottom: 20px; }
  .about-copy p{ font-size: 16px; margin-bottom: 16px; }
}