/* ==========================================================================
   OBEX — About page
   Extends css/style.css (tokens, nav, hero-scroll, buttons, footer are shared).
   Only the About-specific sections live here.
   ========================================================================== */

/* ── Hero: force the story stages to sit lower/left like the main hero, but
   give the closing stage a headline scale that carries an About page ─────── */
.about-hero .hero-title { max-width: 16ch; }
.about-hero .hero-subtitle { max-width: 46ch; }

/* ==========================================================================
   Mission — the story in prose, pulled quote + body
   ========================================================================== */
.mission-section {
  border-top: 1px solid var(--color-line);
  background:
    radial-gradient(ellipse 60% 80% at 12% 0%, rgba(201, 169, 110, 0.12), transparent 62%),
    var(--color-deep);
}
.mission-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-lg);
}
.mission-lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.mission-lead em {
  font-style: normal;
  color: var(--color-gold-light);
}
.mission-body { display: flex; flex-direction: column; gap: var(--space-md); }
.mission-body p {
  color: var(--color-text-dim);
  font-size: var(--text-base);
  line-height: 1.75;
  max-width: 60ch;
}
.mission-body p strong { color: var(--color-text); font-weight: 600; }

.mission-signature {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mission-signature__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
}
.mission-signature__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

/* Pull quote sitting under the lead column */
.mission-quote {
  margin-top: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-gold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-text);
}
.mission-quote span { color: var(--color-gold-light); }

/* ==========================================================================
   Belief strip — three principles
   ========================================================================== */
.belief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.belief-card { border-left: 1px solid var(--color-line); padding-left: var(--space-md); }
.belief-card__k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.belief-card__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-top: 0.7rem;
  line-height: 1.15;
}
.belief-card__b {
  margin-top: 0.6rem;
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  line-height: 1.65;
  max-width: 34ch;
}

/* ==========================================================================
   Team
   ========================================================================== */
.team-section { border-top: 1px solid var(--color-line); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  align-items: stretch; /* all three blocks the same size */
}
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-surface), var(--color-surface-2));
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal);
}
.team-card::after {
  content: "";
  position: absolute;
  top: -40%; right: -30%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.16), transparent 70%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover { transform: translateY(-6px); border-color: rgba(201, 169, 110, 0.4); }
}

/* Monogram avatar — brand-consistent stand-in for a photo */
.team-avatar {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: var(--color-deep);
  background: radial-gradient(circle at 34% 28%, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dark));
  box-shadow: 0 6px 24px rgba(201, 169, 110, 0.35);
  flex: none;
}
.team-avatar--team {
  color: var(--color-gold-light);
  background: radial-gradient(circle at 34% 28%, var(--color-surface-3), var(--color-surface));
  border: 1px solid rgba(201, 169, 110, 0.4);
  box-shadow: inset 0 0 24px rgba(201, 169, 110, 0.14);
}
.team-avatar--team svg { width: 38px; height: 38px; }

/* ── Team media header ──────────────────────────────────────────────────
   The FULL portrait shows uncropped (object-fit: contain) on a blurred,
   theme-tinted backdrop of itself — so it reads full-bleed with no dead
   gaps and no face cut off. Warm sepia pulls the black-and-white toward
   the brand gold. All three cards share this header, so the blocks match. */
.team-photo {
  position: relative;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) 0;
  height: 340px;
  overflow: hidden;
  /* background removed from the photo — the subject floats on the dark card,
     lit by a soft gold glow from above */
  background:
    radial-gradient(ellipse 82% 62% at 50% 8%, rgba(201, 169, 110, 0.16), transparent 60%),
    linear-gradient(165deg, var(--color-surface-2), var(--color-deep));
}
.team-photo__fg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* full subject — never cropped */
  object-position: center bottom;   /* head high, collar meets the fade */
  filter:
    grayscale(1) sepia(0.4) saturate(1.35) contrast(1.03) brightness(1.04)
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.55));
  transition: filter var(--duration-normal) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo);
}
/* Fade the subject into the card using the brand palette — a warm gold
   wash rising from the bottom, a soft theme-colored vignette melting every
   edge, and a final fade to the card surface. */
.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* bottom fade into the card content */
    linear-gradient(to bottom, transparent 54%, rgba(33, 24, 17, 0.4) 76%, rgba(33, 24, 17, 0.9) 92%, #211811 100%),
    /* warm gold theme wash rising from below */
    linear-gradient(to top, rgba(201, 169, 110, 0.22) 0%, rgba(201, 169, 110, 0.07) 24%, transparent 46%),
    /* theme-colored vignette so all four edges melt into the card */
    radial-gradient(ellipse 82% 90% at 50% 40%, transparent 56%, rgba(33, 24, 17, 0.6) 100%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-photo__fg {
    filter:
      grayscale(1) sepia(0.28) saturate(1.5) contrast(1.05) brightness(1.07)
      drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
    transform: scale(1.02);
  }
}
/* icon variant for the no-photo card — same header height, globe centered */
.team-photo--icon { display: flex; align-items: center; justify-content: center; }
.team-photo--icon .team-avatar--team {
  position: relative;
  z-index: 1;
  width: 120px; height: 120px;
}
.team-photo--icon .team-avatar--team svg { width: 54px; height: 54px; }

/* content overlaps the fade so the name sits over the photo's lower edge */
.team-photo + div { margin-top: -2rem; position: relative; z-index: 3; }

.team-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.team-card__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-top: 0.35rem;
}
.team-card__bio {
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.team-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.2rem;
}
.team-card__tags span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* Distributed-team note under the grid */
.team-note {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.team-note::before { content: ""; width: 24px; height: 1px; background: var(--color-line); }

/* ==========================================================================
   Investor CTA
   ========================================================================== */
.invest-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  background:
    radial-gradient(ellipse 70% 70% at 85% 12%, rgba(201, 169, 110, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 60% at 8% 90%, rgba(139, 105, 20, 0.16), transparent 62%),
    var(--color-deep);
}
.invest-panel {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-lg);
}
.invest-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.invest-title em { font-style: normal; color: var(--color-gold-light); }
.invest-lede {
  margin-top: var(--space-sm);
  color: var(--color-text-dim);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 50ch;
}
.invest-lede strong { color: var(--color-text); font-weight: 600; }
.invest-ctas {
  margin-top: var(--space-md);
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* Right rail — the ask, as clean stat rows */
.invest-card {
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #241a13, var(--color-surface));
  padding: var(--space-md);
}
.invest-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.invest-card__list { margin-top: var(--space-sm); }
.invest-card__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.9rem;
  border-top: 1px solid var(--color-line);
}
.invest-card__list li:first-child { border-top: none; }
.invest-card__k { color: var(--color-text-dim); font-size: var(--text-sm); }
.invest-card__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text);
  text-align: right;
}
.invest-card__v small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .mission-grid { grid-template-columns: 1fr; }
  .belief-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .team-grid { grid-template-columns: 1fr; }
  .invest-panel { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LIGHT MODE LAYER — about page (theme system defined in css/style.css)
   ========================================================================== */
[data-theme="light"] .invest-card {
  border-color: rgba(140, 94, 28, 0.35);
  background: linear-gradient(165deg, #FFFCF5, #FFFFFF);
  box-shadow: var(--shadow-lg);
}
/* Team portraits melt into the light card instead of a dark one */
[data-theme="light"] .team-photo__fg {
  filter:
    grayscale(1) sepia(0.32) saturate(1.3) contrast(1.02) brightness(1.02)
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.22));
}
[data-theme="light"] .team-photo::after {
  background:
    linear-gradient(to bottom, transparent 52%, rgba(255,255,255,0.5) 74%, rgba(255,255,255,0.92) 90%, #FFFFFF 100%),
    linear-gradient(to top, rgba(201,169,110,0.16) 0%, rgba(201,169,110,0.05) 22%, transparent 44%),
    radial-gradient(ellipse 82% 90% at 50% 40%, transparent 62%, rgba(255,255,255,0.55) 100%);
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] .team-card:hover .team-photo__fg {
    filter:
      grayscale(1) sepia(0.22) saturate(1.45) contrast(1.04) brightness(1.05)
      drop-shadow(0 16px 30px rgba(0, 0, 0, 0.28));
  }
}