/* ROVE — about page. Shared chrome in site.css; tokens in colors_and_type.css. */

.lead-photo { margin-top: 8px; }
  .lead-photo img { width: 100%; height: 540px; object-fit: cover; border-radius: var(--r-xl); display: block; box-shadow: var(--shadow-2); }

  .story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .story .copy h2 { font: var(--t-display-m); letter-spacing: -0.01em; margin: 14px 0 18px; text-wrap: balance; }
  .story .copy p { font: 400 17px/1.65 var(--font-sans); color: var(--ink-2); margin: 0 0 16px; text-wrap: pretty; }
  .story .copy p strong { color: var(--ink-1); }
  .story-img img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--r-l); display: block; box-shadow: var(--shadow-1); }

  /* Principles */
  .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .principle { background: #fff; border-radius: var(--r-l); padding: 28px; box-shadow: var(--shadow-1), var(--shadow-inset); }
  .principle .n { font: var(--t-mono); color: var(--forest-500); font-size: 13px; }
  .principle h3 { font: var(--t-h1); margin: 12px 0 10px; }
  .principle p { font: 400 15px/1.6 var(--font-sans); color: var(--ink-2); margin: 0; text-wrap: pretty; }

  /* Menagerie gallery */
  .menagerie { background: var(--cream-100); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .menagerie .wrap { padding: 96px 0; }
  .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; margin-top: 40px; }
  .gal { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-1); }
  .gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--d-slow) var(--ease-out); }
  .gal:hover img { transform: scale(1.05); }
  .gal .tag {
    position: absolute; left: 12px; bottom: 12px;
    background: color-mix(in oklab, var(--forest-900) 82%, transparent);
    color: var(--cream-50); font: var(--t-meta); padding: 5px 10px; border-radius: var(--r-pill);
    backdrop-filter: blur(4px);
  }
  .gal.tall { grid-row: span 2; }
  .gal.wide { grid-column: span 2; }

  /* Team */
  .team { display: flex; gap: 20px; flex-wrap: wrap; }
  .member { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: var(--r-l); padding: 20px 24px; box-shadow: var(--shadow-1), var(--shadow-inset); flex: 1; min-width: 260px; }
  .member .av { width: 56px; height: 56px; border-radius: 50%; background: var(--soil-300); display: grid; place-items: center; color: var(--soil-600); font: 600 18px/1 var(--font-sans); flex: 0 0 auto; }
  .member .r { font: var(--t-meta); color: var(--ink-2); margin-top: 3px; }
  .member .nm { font: var(--t-h3); }

  @media (max-width: 880px) {
    .story { grid-template-columns: 1fr; gap: 32px; }
    .principles { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
    .gal.wide { grid-column: span 2; }
    .lead-photo img { height: 320px; }
  }