/* About, beta voices, the finale and the footer. */

.about-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.founder {
  position: relative; max-width: 440px; aspect-ratio: 536 / 803; overflow: hidden;
  border-radius: var(--r-l); border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9), 0 30px 80px -50px rgba(200, 144, 96, 0.5);
}
.founder img { width: 100%; height: 100%; object-fit: cover; }
.founder::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(6, 10, 18, 0.92)); }
.founder figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: grid; gap: 3px; }
.founder figcaption strong { font-size: 1.125rem; font-weight: 650; }
.founder figcaption span { font-size: 0.85rem; line-height: 1.4; color: var(--mist); }
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.facts li {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(232, 238, 246, 0.03); font-size: 0.95rem; font-weight: 550;
}
.facts svg { width: 22px; height: 22px; flex: none; color: var(--copper-lite); }

.voices { padding-bottom: clamp(72px, 9vw, 120px); }
.voices-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 24px; max-width: none; }
.voices-head h2, .voices-head .lede { grid-column: 1; }
.voices-head .lede { margin-top: 0; }
.voices-nav { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 10px; }
.round {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center;
  color: var(--frost); transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.round svg { width: 20px; height: 20px; }
.round:hover:not(:disabled) { background: rgba(232, 238, 246, 0.08); border-color: rgba(232, 238, 246, 0.4); }
.round:disabled { opacity: 0.3; cursor: default; }
/* The track runs from window edge to window edge; its padding puts the first card on the
   column's edge. 100%, not 100vw: a classic scrollbar counts into 100vw, and the cards
   stood 8px right of the heading. Whatever reaches past the column fades out toward the
   window's edge, and the cards fill the column exactly, so no card inside it fades. */
.voices-track {
  --edge: max(var(--gut), calc((100% - var(--w)) / 2));
  container-type: inline-size;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 4px var(--edge) 28px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--edge), #000 calc(100% - var(--edge)), transparent);
}
.voices-track::-webkit-scrollbar { display: none; }
.voices-track:focus-visible { outline-offset: -4px; border-radius: var(--r-l); }
.voices-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; width: max-content; }
.voice {
  scroll-snap-align: start; width: min(410px, 84vw); display: flex; flex-direction: column; gap: 26px; padding: 28px;
  border-radius: var(--r-l); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18, 29, 51, 0.62), rgba(10, 17, 31, 0.5));
}
@container (min-width: 640px) { .voice { width: calc((100cqw - 16px) / 2); } }
@container (min-width: 1100px) { .voice { width: calc((100cqw - 32px) / 3); } }
.voice blockquote { margin: 0; }
.voice blockquote p { font-size: 1.0625rem; line-height: 1.6; color: var(--frost); }
.voice-by { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.voice-ini {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-size: 0.82rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 34% 40%), hsl(calc(var(--h) + 40) 40% 24%));
}
.voice-by strong { display: block; font-size: 0.95rem; }
.voice-by span { font-size: 0.85rem; color: var(--fog); }

/* The block floats in the top of this section (FIN_AT in tensor-scene.js); the words sit below it. */
.finale { min-height: 100vh; min-height: 100svh; padding: 54vh 0 clamp(72px, 10vh, 120px); text-align: center; }
.finale-inner { display: grid; justify-items: center; }
.finale-title { font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 0.92; letter-spacing: -0.045em; font-stretch: 116%; font-weight: 720; }
.finale .lede { margin: 26px auto 34px; }
.finale .actions { justify-content: center; }
.finale .assure { justify-content: center; }
.no-webgl .finale { display: grid; place-items: center; padding: 120px 0; }

.footer { position: relative; z-index: 1; padding: 64px 0 32px; border-top: 1px solid var(--line); background: var(--night); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-brand img { width: auto; height: 30px; margin-bottom: 14px; }
.footer-brand p { max-width: 26em; font-size: 0.9rem; color: var(--fog); }
.footer nav { display: grid; align-content: start; gap: 10px; }
.footer h4 { margin-bottom: 4px; font-size: 0.85rem; font-weight: 650; }
.footer nav a { font-size: 0.9rem; color: var(--mist); transition: color 0.2s; }
.footer nav a:hover { color: var(--frost); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--fog); }

@media (max-width: 859px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .founder { max-width: 360px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .voices-head { grid-template-columns: minmax(0, 1fr); }
  .voices-nav { grid-column: 1; grid-row: auto; }
}