/* ==========================================================================
   WILDCARDLABS — ABOUT (LIGHT, v3)
   Path: public/wildcardlabs.app/frontend/home/subpages/about/about.css

   Runs on the research page's design system (imported below), so the two
   pages read as one continuous flow: same shell, tokens, Sora display type,
   glass plates, sky-tick section heads, spine rows, ambient light and reveals.
   This file only adds what About needs on top.
   ========================================================================== */

@import url('/wildcardlabs.app/frontend/home/subpages/research/research.css');

/* ---------- Loading ---------- */
.wla .wlr-state { max-width: none; padding: clamp(40px, 8vw, 88px) 0; }
.wla-skel { max-width: 640px; }
.wla-skel .wlr-sk.t { height: 56px; width: 78%; border-radius: 10px; margin-top: 22px; }

/* ---------- Hero ---------- */
.wla-hero .wlr-hero-title { max-width: 16ch; }
.wla-hero .wlr-lede { white-space: pre-line; }
.wla-vision { margin-top: clamp(22px, 3.4vw, 32px); max-width: 56ch; }
.wla-vision p { font-size: 15.5px; font-style: normal; color: var(--text-main); white-space: pre-line; }
.wla-hero .wlr-feature .wlr-plate-face.is-logo { background: linear-gradient(160deg, #ffffff, #eef4fb); }
.wla-hero .wlr-feature .wlr-plate-face img { object-fit: contain; padding: 14%; }
.wla-logo-fallback {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 200; font-size: clamp(2.2rem, 8vw, 3.6rem);
  letter-spacing: -.04em; color: var(--wl-sky);
}
.wla-em { font-style: normal; font-weight: 300; color: var(--wl-sky); }

/* ---------- Principles: spine rows with a numbered node ---------- */
.wla-principles { padding-left: 22px; }
.wla-principle {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 22px 4px; border-top: 1px solid var(--line);
  transition: background .25s, padding .3s var(--ease);
}
.wla-principle:first-child { border-top: 0; padding-top: 6px; }
.wla-principle:hover { background: linear-gradient(90deg, rgba(14, 165, 233, .06), transparent 80%); padding-left: 12px; }
.wla-principle .wlr-row-node { top: 34px; }
.wla-principle:first-child .wlr-row-node { top: 18px; }
.wla-principle:hover .wlr-row-node { background: var(--wl-sky); box-shadow: 0 0 0 3px rgba(14, 165, 233, .14), 0 0 12px rgba(14, 165, 233, .6); }
.wla-principle:hover .wlr-row-icon { color: var(--wl-sky); box-shadow: inset 0 0 0 1px rgba(14, 165, 233, .45), 0 10px 24px -10px rgba(14, 165, 233, .55); }
.wla-principle .wlr-row-icon span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.wla-principle h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.15rem, 2.4vw, 1.4rem); letter-spacing: -.03em; line-height: 1.25; }
.wla-principle p { margin-top: 8px; max-width: 62ch; font-size: 14.5px; line-height: 1.7; color: var(--text-dim); text-wrap: pretty; transition: color .25s; }
.wla-principle:hover p { color: var(--text-muted); }

/* ---------- Story ---------- */
.wla-story { margin-top: 0; }
.wla-author { top: calc(88px + var(--safe-top)); }
.wla-author-card { margin-top: 0; }
.wla-avatar { width: 52px; height: 52px; border-radius: 16px; overflow: hidden; }
.wla-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wla-avatar.is-mono { color: rgba(255, 255, 255, .97); box-shadow: none; background: linear-gradient(150deg, hsl(var(--h) 80% 55%), hsl(calc(var(--h) + 38) 75% 36%)); }
.wla-story .wlr-prose { max-width: 64ch; }
.wla-story .wlr-p:first-child { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.3rem, 2.8vw, 1.7rem); letter-spacing: -.03em; line-height: 1.35; color: var(--text-main); }
@media (max-width: 1000px) {
  .wla-author { position: static; display: block; }
  .wla-author .wlr-author { margin-top: 0; }
}

/* ---------- Team: glass plates, like the library covers ---------- */
.wla-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) 20px; }
.wla-member { flex-direction: column; padding: 22px 16px 24px; border-radius: 26px; text-align: left; }
.wla-member::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 30%) var(--my, 20%), rgba(14, 165, 233, .12), transparent 70%), rgba(255, 255, 255, .75);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 34px -22px rgba(14, 165, 233, .5);
  opacity: 0; transition: opacity .35s;
}
.wla-member .wlr-plate { width: 76px; height: 76px; margin-bottom: 20px; }
.wla-member .wlr-plate-face { border-radius: 24px; }
.wla-member .wlr-plate-face.is-mono span { font-size: 1.7rem; }
.wla-member .wlr-title { margin-top: 0; font-weight: 300; font-size: 1.3rem; letter-spacing: -.03em; }
.wla-member .wlr-meta { margin-top: 6px; }
.wla-member .wlr-sub { -webkit-line-clamp: 5; }
@media (hover: hover) {
  .wla-member:hover { transform: translateY(-3px); }
  .wla-member:hover::before { opacity: 1; }
  .wla-member:hover .wlr-halo { opacity: .8; transform: scale(1.04); }
  .wla-member:hover .wlr-plate-face { transform: scale(1.04); }
  .wla-member:hover .wlr-sub { color: var(--text-muted); }
}
@media (max-width: 900px) { .wla-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wla-team { grid-template-columns: 1fr; } }

/* ---------- Awards ---------- */
.wla-award { grid-template-columns: 56px 64px minmax(0, 1fr); }
.wla-award .wlr-row-icon { width: 56px; height: 44px; border-radius: 12px; }
.wla-award .wlr-row-icon img { object-fit: contain; padding: 4px; }
.wla-award-year { font-family: var(--font-display); font-weight: 300; font-size: 1.15rem; letter-spacing: -.02em; color: var(--wl-sky); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .wla-award { grid-template-columns: 48px minmax(0, 1fr); } .wla-award-year { grid-column: 2; grid-row: 1; } .wla-award .wlr-row-body { grid-column: 2; } .wla-award .wlr-row-icon { grid-row: 1 / span 2; width: 48px; } }

/* ---------- Contact ---------- */
.wla-contact { border-top-color: var(--line-2); }
.wla-contact .wlr-fact dd a { transition: color .2s; }
.wla-contact .wlr-fact dd a:hover { color: var(--wl-sky); }
.wla .wlr-portal h2 { max-width: 22ch; }