/* Home section "One OS. Every tribe.": six cards, each a crayon drawing of a tribe using its own app.
   Tokens and the panel come from the illustration kit (kit/kit.css); this file only lays out the cards. */

.tr { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: clamp(56px, 8vw, 110px) 0 clamp(80px, 10vw, 140px); }
.tr h2 { margin-top: 10px; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; }
.tr-lead { margin-top: 18px; max-width: 54ch; color: var(--text-muted); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; }

.tr-grid { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 64px) clamp(20px, 2.6vw, 36px); }
.tr-card { min-width: 0; }
/* The panel sits low behind each square drawing, so heads and the brain break out of it. */
.tr-art { margin: 0; padding-inline: 0; }
.tr-art::before { inset: 22% 0 6%; }
.tr-where { margin: 14px 0 0; font: 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pil-cobalt); }
.tr-card h3 { margin: 8px 0 0; font: 400 clamp(26px, 2.3vw, 32px)/1.1 var(--font-display); letter-spacing: -0.015em; }
.tr-card h3 + p { margin: 8px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.45; color: var(--text-muted); }

.tr-close { margin-top: clamp(48px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--border-strong); max-width: 30ch; font: 400 clamp(24px, 2.4vw, 32px)/1.25 var(--font-display); }

@media (max-width: 960px) { .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tr-grid { grid-template-columns: 1fr; gap: 44px; }
  /* kit.css bleeds .pil-art to the screen edges on phones; a card keeps its drawing inside the gutter. */
  .tr-art { margin-inline: 0; }
  .tr-art::before { border-radius: var(--pil-panel-r); inset: 22% 0 6%; }
}