/* ============================================
   Meet the Founders (/about) — page styles
   Loaded by about.html only, the way blog.css and mentor-circle.css are loaded by their
   own pages. Everything here is built from the Tide tokens in styles.css and declares no
   color of its own, so light and dark come from the same token switch as the rest of the
   site. Anything on a .cosmic-band uses the --cosmic-* set, which is dark in both themes.

   Why a separate sheet rather than a block at the end of styles.css: every page on the
   site links styles.css with a `?v=` that is the file's own content hash
   (scripts/asset-versions.js). Adding a rule to styles.css changes that hash on sixteen
   pages at once, including the owner's legal pages. A sheet that only this page links
   changes only this page.
   ============================================ */

/* ---------- Hero: the page's one cosmic band at the top ---------- */
.about-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + 80px);
  padding-bottom: 80px;
  overflow: hidden;
  text-align: center;
}

.about-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.about-title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--cosmic-text-primary);
  margin-bottom: var(--space-md);
}

.about-intro {
  max-width: 620px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
}

/* ---------- The two founders, side by side ---------- */
.about-founders {
  padding: 96px 0 40px;
}

/* align-items: start, so each card is only as tall as what it says. Stretched to match
   Levi's card (which carries his own words), his dad's card was mostly empty space. */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}

.founder-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
}

.founder-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

/* The blog's author avatar (.author-avatar-sm in blog.css) at founder size: the same
   gradient disc and on-accent ink, an initial or an icon, never a photo. */
.founder-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--tide-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
}

.founder-avatar svg {
  width: 28px;
  height: 28px;
}

.founder-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tide-text-primary);
}

/* The eyebrow treatment, in the link ink rather than the raw brand: 12px text needs
   4.5:1, and the light brand is 4.45:1 on the page background. */
.founder-role {
  margin-top: var(--space-xs);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--tide-link);
}

.founder-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tide-text-secondary);
}

.founder-link {
  align-self: flex-start;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--tide-link);
}

.founder-link:hover {
  color: var(--tide-link-hover);
}

/* ---------- Levi's own words, inside his card ----------
   A quiet definition list: the question in the eyebrow ink, his answer in the primary text.
   The rule above it separates his words from the company's description of him. */
.founder-words {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--tide-hairline);
}

.founder-words-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--tide-link);
}

.founder-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
}

.founder-quotes dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--tide-text-secondary);
}

.founder-quotes dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.45;
  color: var(--tide-text-primary);
  text-wrap: balance;
}

/* ---------- What they've caught, by spot ---------- */
.about-catches {
  padding: 56px 0 104px;
}

.catch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}

.catch-spot {
  padding: var(--space-lg);
}

.catch-spot-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tide-text-primary);
  margin-bottom: 14px;
}

.catch-species {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* The app's tint chip: 12% accent under primary text, never white on a fill. */
.catch-species li {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--tide-tint-weak);
  color: var(--tide-text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.catch-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tide-text-meta);
}

/* ---------- Closing ask ----------
   Reuses the home page's .download-cta band. The one thing it cannot reuse is the link
   colour: --tide-link is the light-theme #0A6090 on a band that is dark in both themes. */
.about-cta-help a {
  color: var(--cosmic-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-cta-help a:hover {
  color: var(--cosmic-text-primary);
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 768px) {
  .about-hero {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 56px;
  }

  .about-title {
    font-size: 40px;
  }

  .about-intro {
    font-size: 17px;
  }

  .about-founders {
    padding: 48px 0 24px;
  }

  .founders-grid,
  .catch-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .founder-card {
    padding: var(--space-lg);
  }

  .about-catches {
    padding: 48px 0 72px;
  }
}

@media (max-width: 400px) {
  .about-title {
    font-size: 34px;
  }
}