/* STARS NETWORK · /about
   Chaptered editorial, after Kage: small type set in the corners of big
   frames, a chapter folio in the margin, statements beside their lead copy,
   figures in a hairline row, the team, and a closing word set on its side.
   The words do the moving (text-motion.js): the title rises letter by letter
   and answers the pointer, statements light up as they are read, "a closer"
   and "connection" meet, the figures roll, and TOGETHER comes together. The
   chrome emblem in the 3D stage is the only object. */

.pg--about { --b-gap: clamp(28px, 6vw, 110px); }
.b-eyebrow, .b-head, .b-chips span, .b-member__role, .b-foot__h, .b-stats dd, .b-hero__side {
  font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
}
.b-dot { display: inline-block; width: 5px; height: 5px; margin-right: 12px; border-radius: 50%; background: var(--bone); vertical-align: 2px;
  box-shadow: 0 0 10px rgba(255, 250, 240, .7); }

/* ------------------------------------------------------------ the folio */
.b-folio { position: fixed; right: calc(var(--pad) * 0.6); top: 50%; z-index: 6; transform: translateY(-50%); display: grid; gap: 4px; }
.b-folio a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 30px; color: var(--muted); }
.b-folio b { font-size: 10px; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.b-folio span { font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bone);
  opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .3s var(--ease-out); white-space: nowrap; }
.b-folio a::after { content: ''; width: 14px; height: 1px; background: currentColor; transition: width .3s var(--ease-out), background-color .2s ease; }
.b-folio a[aria-current="true"] { color: var(--bone); }
.b-folio a[aria-current="true"] span { opacity: 1; transform: none; }
.b-folio a[aria-current="true"]::after { width: 26px; }
@media (hover: hover) and (pointer: fine) { .b-folio a:hover span { opacity: .8; transform: none; } .b-folio a:hover { color: var(--bone-dim); } }

/* ------------------------------------------------------- the title page */
.b-hero { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 5vh) var(--pad) 44px; }
.b-hero__top { position: relative; z-index: 1; max-width: 46rem; }
.b-eyebrow { margin: 0 0 28px; color: var(--bone-dim); }
.b-hero__title { font-size: clamp(40px, 4.5vw, 82px); line-height: 1; letter-spacing: -0.016em; margin: 0; }
.b-hero__sub { margin: 26px 0 0; font-size: 15px; line-height: 1.6; color: var(--bone-dim); max-width: 34ch; }
.b-hero__side { position: absolute; right: var(--pad); top: calc(var(--nav-h) + 5vh); margin: 0; writing-mode: vertical-rl; color: var(--bone-dim); letter-spacing: .4em; }
.b-chips { position: absolute; left: var(--pad); bottom: 44px; display: flex; gap: clamp(22px, 4vw, 64px); }
.b-chips a { display: grid; gap: 10px; min-height: 44px; }
.b-chips b { font-family: var(--sans); font-weight: 200; font-size: clamp(28px, 2.6vw, 44px); line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.b-chips span { color: var(--muted); font-size: 9px; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .b-chips a:hover b, .b-chips a:hover span { color: var(--bone); } }

/* ------------------------------------------------------------ chapters */
.b-sec { position: relative; min-height: 100vh; min-height: 100svh; padding: 20vh var(--pad) 22vh; }
.b-head { display: flex; align-items: center; gap: 16px; color: var(--bone-dim); }
.b-head b { color: var(--bone); font-variant-numeric: tabular-nums; }
.b-head__rule { width: 64px; height: 1px; background: var(--line); }
.b-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--b-gap); margin-top: 46px; align-items: start; max-width: 1240px; }
.b-statement { font-size: clamp(30px, 3.1vw, 56px); line-height: 1.04; letter-spacing: -0.014em; max-width: 17ch; }
.b-statement--short { max-width: 12ch; }
.b-grid__copy { padding-top: 10px; }
.b-lead { margin: 0; font-size: clamp(15px, 1.08vw, 17px); line-height: 1.6; color: var(--bone); max-width: 42ch; }
.b-body { margin: 18px 0 0; font-size: 14px; line-height: 1.72; color: var(--bone-dim); max-width: 44ch; }
.b-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 22px; border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--bone); transition: border-color .16s ease; }
.b-arrow svg { width: 9px; height: 9px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .b-arrow:hover { border-color: var(--bone); } .b-arrow:hover svg { transform: translate(2px, -2px); } }
.b-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin: 14vh 0 0; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.b-stats div { display: grid; gap: 10px; }
.b-stats dt { font-family: var(--sans); font-weight: 200; font-size: clamp(38px, 3.4vw, 62px); line-height: .9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.b-stats dd { margin: 0; color: var(--muted); font-size: 9.5px; }

/* 02 · "A closer" and "connection." come in from either side and meet as the
   page scrolls; then three sentences, lit as they are read */
.b-converge { margin: 40px 0 0; font-size: clamp(56px, 9.4vw, 172px); line-height: .9; letter-spacing: -0.035em; max-width: 1240px; }
.b-converge [data-part] { display: block; }
.b-converge [data-part="b"] { text-align: right; }
.b-why__lines { display: grid; gap: clamp(22px, 4.2vh, 44px); max-width: 1100px; margin-top: 12vh; }
.b-say { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.1vw, 54px); line-height: 1.12; letter-spacing: -0.012em; max-width: 24ch; }
.b-say:nth-child(2) { margin-left: auto; text-align: right; }
.b-say em { font-style: italic; }

/* 03 · the team, founder first. Each portrait is fabric (cloth.js) that lies
   flat until the pointer is on it. Opening one (resting the pointer on it, a
   click or a tap) lifts it a little larger while the others step aside and
   dim, and a small panel with the person's links unfolds from under the name.
   The fabric can move past its box, so nothing around it clips. */
.b-team__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--b-gap); align-items: end; margin-top: 46px; max-width: 1240px; }
.b-team__head .b-body { margin: 0; }
.b-crew { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px); max-width: 1240px; }
.b-member { position: relative; }
.b-member__open { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; touch-action: manipulation; }
.b-member__open:focus-visible { outline: none; }
.b-member__open:focus-visible .b-member__pic { outline: 1px solid var(--bone); outline-offset: 6px; }
.b-member__pic { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; transform-origin: 50% 100%;
  transition: transform .6s var(--ease-out), opacity .45s ease, filter .45s ease; }
.b-member__pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: inherit; }
/* its hairline edge; the cloth draws its own, which moves with the fabric */
.b-member__pic::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(236, 230, 216, .14);
  transition: box-shadow .5s ease; pointer-events: none; }
.b-member__pic.has-cloth::after { display: none; }
.b-member__pic.has-cloth img { opacity: 0; }
.b-member__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n plus" "name plus" "role plus";
  column-gap: 12px; row-gap: 6px; align-items: center; padding: 20px 2px 0; transition: opacity .45s ease; }
.b-member__n { grid-area: n; font-size: 10px; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.b-member__name { grid-area: name; font-family: var(--serif); font-size: clamp(22px, 1.8vw, 30px); line-height: 1.1; white-space: nowrap; }
.b-member.is-open .b-member__name .tm-c { animation: b-wave .8s var(--ease-out) calc(var(--i, 0) * 45ms) both; }
@keyframes b-wave { 0% { translate: 0 0; } 35% { translate: 0 -0.22em; } 100% { translate: 0 0; } }
.b-member__role { grid-area: role; color: var(--bone-dim); }
/* the sign that it opens: a plus that turns to a cross */
.b-member__plus { grid-area: plus; position: relative; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%;
  transition: transform .5s var(--ease-out), border-color .2s ease; }
.b-member__plus::before, .b-member__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: currentColor; translate: -50% -50%; }
.b-member__plus::after { rotate: 90deg; }
/* the links: a panel folded back under the name, unfolding when it opens */
.b-member__more { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; padding-top: 16px; perspective: 900px; pointer-events: none; }
.b-member__links { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(12, 12, 15, .86); transform-origin: 50% 0; transform: rotateX(-86deg); opacity: 0;
  transition: transform .34s var(--ease-in-out), opacity .2s ease .1s; }
.b-member__links li { opacity: 0; transform: translateY(6px); transition: opacity .12s ease, transform .12s ease; }
.b-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 8px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); transition: background-color .16s ease; }
.b-link b { font-weight: 600; }
.b-link span { margin-left: auto; letter-spacing: .02em; text-transform: none; font-size: 12.5px; color: var(--bone-dim); }
.b-link svg { flex: none; width: 9px; height: 9px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.b-link:hover { background: rgba(236, 230, 216, .07); } a.b-link:hover svg { transform: translate(2px, -2px); } }
/* a link still to come from the person: said plainly, never filled in */
.b-link.is-pending { color: var(--muted); }
.b-link.is-pending span { color: var(--muted); font-style: italic; }
/* open: the picture rises and grows, the panel unfolds, then its links arrive */
.b-member.is-open .b-member__pic { transform: translateY(-12px) scale(1.07); }
.b-member.is-open .b-member__pic::after { box-shadow: inset 0 0 0 1px rgba(236, 230, 216, .5); }
.b-member.is-open .b-member__plus { transform: rotate(45deg); border-color: var(--bone); }
.b-member.is-open .b-member__more { pointer-events: auto; }
.b-member.is-open .b-member__links { transform: none; opacity: 1; transition: transform .7s var(--ease-out), opacity .16s ease; }
.b-member.is-open .b-member__links li { opacity: 1; transform: none;
  transition: opacity .3s ease calc(.18s + var(--i, 0) * .07s), transform .5s var(--ease-out) calc(.18s + var(--i, 0) * .07s); }
/* and the others step aside and dim */
.js .b-member[data-reveal] { opacity: 1; transform: none; }
.js .b-member[data-reveal].is-in { transition: transform .6s var(--ease-out); }
.b-crew.has-open .b-member.is-before { transform: translateX(-18px); }
.b-crew.has-open .b-member.is-after { transform: translateX(18px); }
.b-crew.has-open .b-member:not(.is-open) .b-member__pic { opacity: .38; filter: saturate(.3); }
.b-crew.has-open .b-member:not(.is-open) .b-member__cap { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .b-member__open:hover .b-member__plus { border-color: var(--bone); } }
/* each portrait develops like a print in the tray: a negative under the
   safelight first, the finished picture a moment later */
.js .b-member[data-reveal] .b-member__pic :is(img, .cloth) { filter: invert(1) sepia(1) saturate(2.4) hue-rotate(-38deg) brightness(.62) contrast(1.2) blur(1.5px); }
.js .b-member[data-reveal].is-in .b-member__pic :is(img, .cloth) { filter: none; transition: filter 2s cubic-bezier(0.33, 1, 0.68, 1) calc(var(--d, 0ms) + 200ms); }

/* 04 · the close, with its word on its side */
.b-close { display: flex; flex-direction: column; justify-content: center; padding-right: calc(var(--pad) + 16vw); }
.b-close__title { font-size: clamp(44px, 5.6vw, 100px); line-height: .96; letter-spacing: -0.02em; margin: 26px 0 0; max-width: 10ch; }
.b-close__body { max-width: 36ch; }
.b-close__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.b-close__word {
  position: absolute; right: calc(var(--pad) + 30px); top: 50%; margin: 0; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--sans); font-weight: 900; font-stretch: 112.5%; font-size: clamp(64px, 8.4vw, 150px); line-height: .8; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--bone); opacity: .92; pointer-events: none;
}

/* ----------------------------------------------------------------- footer */
.b-foot { position: relative; z-index: 2; padding: 64px var(--pad) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft); background: rgba(8, 8, 10, .7); }
.b-foot__line { display: flex; align-items: flex-start; gap: 18px; margin: 0; max-width: 34ch; font-family: var(--serif); font-size: clamp(19px, 1.5vw, 25px); line-height: 1.3; }
.b-foot__line svg { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--bone); }
.b-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 14rem)); gap: 24px; margin-top: 52px; }
.b-foot__cols div { display: grid; align-content: start; gap: 2px; }
.b-foot__h { margin: 0 0 8px; color: var(--muted); font-size: 9px; }
.b-foot__cols a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--bone-dim); transition: color .16s ease; }
@media (hover: hover) and (pointer: fine) { .b-foot__cols a:hover { color: var(--bone); } }
.b-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 52px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* the folio keeps a gutter of its own on a wide screen, and the team's
   links hang in the room left under the row */
@media (min-width: 901px) {
  .b-sec { padding-right: calc(var(--pad) + 130px); }
  .b-close { padding-right: calc(var(--pad) + 16vw + 60px); }
  .b-crew { margin-bottom: 140px; }
}

/* --------------------------------------------------------- reduced motion */
/* nothing moves: the panel and the dimming arrive as fades */
@media (prefers-reduced-motion: reduce) {
  .js .b-member[data-reveal].is-in .b-member__pic :is(img, .cloth) { transition: filter .6s linear; }
  .js .b-member[data-reveal].is-in, .b-member__pic { transition: opacity .3s ease, filter .3s ease; }
  .b-member.is-open .b-member__pic, .b-crew.has-open .b-member.is-before, .b-crew.has-open .b-member.is-after { transform: none; }
  .b-member__links, .b-member.is-open .b-member__links { transform: none; transition: opacity .25s ease; }
  .b-member__links li, .b-member.is-open .b-member__links li { transform: none; transition: opacity .25s ease; }
  .b-member__plus { transition: border-color .2s ease; }
  .b-member.is-open .b-member__name .tm-c { animation: none; }
}

/* ---------------------------------------------------------------- phones */
/* two to a row; a tap opens a person, their links unfolding in place */
@media (max-width: 900px) {
  .b-folio { display: none; }
  .b-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .b-member__more { position: relative; top: auto; display: grid; grid-template-rows: 0fr; padding-top: 0; transition: grid-template-rows .5s var(--ease-out); }
  .b-member.is-open .b-member__more { grid-template-rows: 1fr; }
  .b-member__more > .b-member__links { min-height: 0; overflow: hidden; }
  .b-member.is-open .b-member__more > .b-member__links { margin-top: 12px; }
  .b-member.is-open .b-member__pic { transform: translateY(-6px) scale(1.03); }
  .b-crew.has-open .b-member.is-before, .b-crew.has-open .b-member.is-after { transform: none; }
}
@media (max-width: 760px) {
  .b-hero { display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 3vh); }
  .b-hero__title { font-size: clamp(38px, 10.6vw, 52px); }
  .b-hero__side { display: none; }
  .b-chips { position: relative; left: auto; bottom: auto; margin-top: auto; padding-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .b-sec { padding: 14vh var(--pad) 16vh; }
  .b-grid, .b-team__head { grid-template-columns: 1fr; gap: 24px; }
  .b-stats { margin-top: 8vh; }
  .b-member__name { font-size: 21px; }
  .b-member__plus { width: 26px; height: 26px; }
  .b-link { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 8px 12px; }
  .b-link span { margin-left: 0; }
  .b-link svg { display: none; }
  .b-converge { font-size: clamp(46px, 15vw, 72px); }
  .b-why__lines { margin-top: 8vh; }
  .b-say { font-size: clamp(24px, 7vw, 32px); }
  .b-say:nth-child(2) { margin-left: 0; text-align: left; }
  .b-close { padding-right: var(--pad); padding-bottom: 30vh; }
  .b-close__word { top: auto; bottom: 7vh; right: auto; left: var(--pad); transform: none; writing-mode: horizontal-tb; font-size: 14.5vw; }
  .b-foot__cols { grid-template-columns: 1fr 1fr; }
}