/* About and Team pages, ported from variant-c/about.html and team.html. */

/* ---------- Origin ---------- */
.origin{
  background:
    repeating-linear-gradient(60deg, transparent 0 46px, rgba(240,198,116,.045) 46px 47px),
    repeating-linear-gradient(-60deg, transparent 0 46px, rgba(154,124,208,.04) 46px 47px),
    linear-gradient(180deg,#141017,#1a1226 55%,#191320);
  border-top:1px solid transparent;border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent 4%,rgba(212,162,74,.5) 50%,transparent 96%) 1;
}
.origin-grid{display:block;max-width:940px}
.origin-statement{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.08;color:#fff;margin:.18em 0 0}
.origin-statement em{color:var(--gold-bright);font-style:normal}
.origin-statement .origin-rest{display:block;margin-top:.5em;font-family:var(--font-body);text-transform:none;font-weight:400;font-size:clamp(1.02rem,1.8vw,1.24rem);line-height:1.55;color:var(--text-dim);max-width:680px}

/* ---------- Bridge ---------- */
.bridge{background:linear-gradient(180deg,var(--ink),#141019)}
.bridge-card{max-width:900px;margin:0 auto;text-align:center;padding:clamp(30px,5vw,52px);border-radius:22px;background:rgba(255,255,255,.03);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(240,198,116,.1)}
.bridge-card h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,4.6vw,3rem);color:#fff;margin:.2em 0 .35em}
.bridge-card p{color:var(--text-dim);font-size:1.08rem;margin:0 auto 14px;max-width:620px}
.bridge-card p b{color:var(--gold-bright);font-weight:600}
.bridge-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.bridge-step{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line-2);font-weight:600;font-size:.95rem;color:var(--text)}
.bridge-arrow{color:var(--gold);flex:none}
.bridge-arrow svg{width:20px;height:20px}
@media(max-width:640px){.bridge-arrow{transform:rotate(90deg)}}

/* ---------- Six-i values ---------- */
.values{
  background:
    repeating-linear-gradient(60deg, transparent 0 46px, rgba(240,198,116,.035) 46px 47px),
    repeating-linear-gradient(-60deg, transparent 0 46px, rgba(154,124,208,.03) 46px 47px),
    radial-gradient(120% 100% at 50% 0%, #1c1622, var(--ink) 70%);
}
.gemgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.valgem{position:relative;text-align:center;padding:26px 16px 22px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid var(--line-2);transition:transform .3s ease,background .3s,border-color .3s;cursor:default}
.valgem:hover,.valgem:focus-visible{transform:translateY(-6px);background:rgba(255,255,255,.06);border-color:rgba(240,198,116,.45);outline:none}
.valgem .vnote{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,6px);width:min(248px,78vw);z-index:5;pointer-events:none;padding:12px 14px;border-radius:12px;text-align:left;background:#241a33;border:1px solid rgba(240,198,116,.4);box-shadow:0 14px 34px rgba(0,0,0,.5);font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:.85rem;line-height:1.45;color:var(--text-dim);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s}
.valgem:hover .vnote,.valgem:focus-visible .vnote,.valgem:focus-within .vnote{opacity:1;visibility:visible;transform:translate(-50%,0)}
.valgem:nth-child(6) .vnote{left:auto;right:0;transform:translate(0,6px)}
.valgem:nth-child(6):hover .vnote,.valgem:nth-child(6):focus-within .vnote{transform:translate(0,0)}
.valgem:nth-child(1) .vnote{left:0;transform:translate(0,6px)}
.valgem:nth-child(1):hover .vnote,.valgem:nth-child(1):focus-within .vnote{transform:translate(0,0)}
@media(hover:none){.valgem .vnote{position:static;transform:none;opacity:1;visibility:visible;width:auto;margin-top:12px;display:block;background:none;border:0;box-shadow:none;padding:0;text-align:center}}
.valgem .facet{width:62px;height:62px;margin:0 auto 14px;position:relative;transition:transform .5s ease}
.valgem:hover .facet{transform:rotate(120deg) scale(1.08)}
.valgem .facet svg{width:100%;height:100%}
.valgem .word{font-family:var(--font-display);text-transform:uppercase;font-size:1rem;letter-spacing:.03em;color:#fff}
.valgem .word .i{color:var(--gold-bright)}
@media(max-width:860px){.gemgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.gemgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- People: teaser (About) ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.person{padding:30px 26px;border-radius:18px;background:var(--ink-2);border:1px solid var(--line);text-align:left;transition:transform .25s,border-color .25s;color:inherit}
.person:hover{transform:translateY(-4px);border-color:rgba(212,162,74,.4)}
.mono{width:66px;height:66px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.6rem;color:#241a08;background:linear-gradient(135deg,var(--gold-bright),var(--gold));margin-bottom:18px}
.person h3{font-family:var(--font-body);font-weight:700;font-size:1.2rem;color:#fff;margin:0 0 4px}
.person .role{color:var(--gold-bright);font-weight:600;font-size:.92rem;display:block}
.person p{color:var(--text-dim);font-size:.95rem;margin:12px 0 0}
.person-photo{width:66px;height:66px;border-radius:14px;object-fit:cover;display:block;border:1px solid rgba(212,162,74,.35);margin-bottom:18px}
@media(max-width:800px){.people{grid-template-columns:1fr}}

/* ---------- People: full list (Team page) ---------- */
.team-list.people{display:flex;flex-direction:column;gap:18px}
.team-list .person{padding:clamp(24px,3.4vw,34px);display:grid;grid-template-columns:72px 1fr;gap:clamp(18px,3vw,30px);align-items:start;transition:border-color .25s}
.team-list .person:hover{transform:none}
.team-list .person-photo,.team-list .mono{width:72px;height:72px;border-radius:16px;margin-bottom:0;flex:none}
.team-list .mono{font-size:1.8rem}
.team-list .person h3{font-size:1.24rem}
.team-list .person-bio p{margin:12px 0 0;font-size:1rem}
@media(max-width:560px){.team-list .person{grid-template-columns:1fr}}

/* ---------- Operated by ---------- */
.opband{background:linear-gradient(180deg,#141019,var(--ink))}
.opcard{max-width:820px;margin:0 auto;text-align:center;padding:clamp(28px,5vw,48px);border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.opcard h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.6rem);color:#fff;margin:.2em 0 .3em}
.opcard p{color:var(--text-dim);font-size:1.06rem;margin:0 auto;max-width:600px}
.op-orgs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,4vw,44px);margin-top:26px}
.op-org{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1rem,2.2vw,1.35rem);color:var(--text-dim)}

/* ---------- CTA anthem ---------- */
.anthem{position:relative;overflow:hidden;text-align:center;padding:clamp(70px,11vw,130px) 0;background:repeating-linear-gradient(60deg, transparent 0 46px, rgba(240,198,116,.04) 46px 47px),repeating-linear-gradient(-60deg, transparent 0 46px, rgba(154,124,208,.035) 46px 47px),radial-gradient(90% 130% at 50% 0%, rgba(107,78,158,.4), transparent 60%),radial-gradient(70% 120% at 50% 110%, rgba(212,162,74,.28), transparent 55%),var(--ink)}
.anthem .eyebrow{justify-content:center;display:flex}
.anthem h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.2rem,6vw,4.2rem);color:#fff;margin:.24em auto .3em;max-width:16ch}
.anthem h2 em{color:var(--gold-bright);font-style:normal;text-shadow:0 0 30px rgba(240,198,116,.4)}
.anthem p{color:var(--text-dim);font-size:1.12rem;max-width:560px;margin:0 auto 32px}
.anthem .btn-row{justify-content:center}
@media(prefers-reduced-motion:reduce){.valgem,.valgem .vnote,.valgem .facet,.person{transition:none}}