/* ============================================================
   MIRRORLESS — About
   Built 2026-09-18 from Figma "New Mirrorless Website", frame About
   (node 1:1126). The previous about.css is about.css.bak-0918-figma.

   THE UNIT
   <main class="ab"> is a size container, and --px is one Figma pixel at the
   page's width: calc(var(--px) * 397) is Figma's 397 at any width. The hero
   uses --hx instead, the smaller of --px and whatever fits the whole opening
   (bags, title, intro) on the first screen, so a short laptop screen gets
   the full composition rather than the bags and half a title.

   Every number next to a var(--px) is read straight off the frame.
   ============================================================ */

/* Hanson Bold, by Finn Hanberg. The font's licence field reads "Creative
   Commons / Please give credits to author". Subset to Latin. */
@font-face {
  font-family: 'Hanson';
  src: url('fonts/hanson-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* on :root, not .ab: the note lives outside <main> and needs them too */
:root {
  --ab-red: #C0454F;                 /* Figma's red for the overlays */
  --ab-cream: #FFF9EA;               /* the team section */
  --ab-ground: #0F0E0E;              /* the site ink, held when the page lights */
  --ab-light: #F2F1ED;               /* under the column */
  --ab-hanson: 'Hanson', var(--display);
}
.ab {
  container-type: inline-size;
  overflow-x: clip;
  --px: calc(100cqw / 1440);
}

/* ============================================================
   1. Hero — the mailers, the title, one line
   ============================================================ */
.ab-hero {
  --hx: min(var(--px), calc((100svh - 24px) / 1090));
  position: relative;
  height: calc(var(--hx) * 1090);
  /* the nav is sticky and in flow; the mailers start under it, as in Figma */
  margin-top: calc(var(--nav-h, 92px) * -1);
  z-index: 1;
}

.ab-bag {
  position: absolute;
  left: calc(50% + var(--hx) * (var(--cx) - 720));
  top: calc(var(--hx) * var(--cy));
  width: calc(var(--hx) * 744.46);
  aspect-ratio: 744.46 / 679.85;
  translate: -50% -50%;
  rotate: var(--rot);
  z-index: 1;
  cursor: pointer;
}
.ab-bag-par,
.ab-bag-fly,
.ab-bag-float { width: 100%; height: 100%; }
.ab-bag img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2.4em 2.2em rgba(0, 0, 0, 0.5));
}

/* pointer parallax, written by about.js */
.ab-bag-par {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 0.9s var(--ease);
}

/* the arrival: each mailer is thrown in from off its own corner and lands
   with a little overshoot, then settles into a slow float */
.ab-js .ab-bag-fly { opacity: 0; }
.ab-hero.is-in .ab-bag-fly {
  opacity: 1;
  animation: ab-fly 1.35s cubic-bezier(0.16, 1.08, 0.3, 1) var(--d, 0s) both;
}
.ab-bag--1 { --from: translate(-85%, 70%) rotate(-38deg) scale(0.82); }
.ab-bag--2 { --from: translate(70%, -90%) rotate(42deg) scale(0.82); }
@keyframes ab-fly {
  0%   { transform: var(--from); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.ab-hero.is-in .ab-bag-float {
  animation: ab-float var(--fd, 8s) ease-in-out calc(var(--d, 0s) + 1.35s) infinite alternate;
}
@keyframes ab-float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-2.2%) rotate(1.6deg); }
  100% { transform: translateY(1.4%) rotate(-1.2deg); }
}
/* press a mailer and it hops */
.ab-bag.is-bumped img { animation: ab-bump 0.7s cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes ab-bump {
  0%   { transform: none; }
  35%  { transform: translateY(-7%) rotate(-7deg) scale(1.04); }
  100% { transform: none; }
}

.ab-title {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--hx) * 858);
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: var(--ab-hanson);
  font-weight: 700;
  font-size: calc(var(--hx) * 128);
  line-height: 0.92;
  letter-spacing: 0;
  color: var(--paper);
  white-space: nowrap;
}
/* about.js splits the title; each letter rises out of its own slot */
.ab-ch {
  display: inline-block;
  overflow: hidden;
  padding: 0.08em 0.01em;
  margin: -0.08em -0.01em;
  vertical-align: top;
}
.ab-ch > span { display: inline-block; }
.ab-sp { display: inline-block; width: 0.32em; }
.ab-js .ab-ch > span { transform: translateY(110%); }
.ab-hero.is-in .ab-ch > span {
  transform: none;
  transition: transform 1s cubic-bezier(0.2, 0.9, 0.2, 1) calc(0.55s + var(--i) * 0.055s);
}

.ab-intro {
  position: absolute;
  left: 50%;
  top: calc(var(--hx) * 1036);
  z-index: 2;
  width: min(calc(var(--hx) * 1091), calc(100cqw - 32px));
  margin: 0;
  translate: -50% 0;
  text-align: center;
  font-size: calc(var(--hx) * 36);
  font-weight: 400;
  line-height: 1.2;
  color: var(--paper);
  text-wrap: balance;
}
.ab-js .ab-intro { opacity: 0; transform: translateY(0.6em); }
.ab-hero.is-in .ab-intro {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease) 1.05s, transform 0.9s var(--ease) 1.05s;
}

/* ============================================================
   2. The journey — three stops on a dashed line
   ============================================================ */
.ab-journey {
  position: relative;
  z-index: 2;
  padding: calc(var(--px) * 135) 0 calc(var(--px) * 119);
}
.ab-stops {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-stop { position: relative; }
.ab-stop--video  { margin-top: calc(var(--px) * 127); }
.ab-stop--poster { margin-top: calc(var(--px) * 126); }

/* the connector: Figma's 3px line, dashed 26/26, starting 21 under the stop
   above. It draws down as you scroll (--draw, from about.js). */
.ab-stop + .ab-stop::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 3px;
  height: calc(var(--px) * 106);
  margin-left: -1.5px;
  background: repeating-linear-gradient(to bottom,
    #D9D9D9 0 calc(var(--px) * 26), transparent calc(var(--px) * 26) calc(var(--px) * 52));
  transform: scaleY(var(--draw, 1));
  transform-origin: top;
  opacity: 0.85;
}

.ab-frame {
  --r: 0px;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-3);
  outline: none;
  clip-path: inset(0 round var(--r));
  isolation: isolate;
  transition:
    clip-path 1.15s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.6s var(--ease);
}
.ab-stop--circle .ab-frame {
  width: calc(var(--px) * 397);
  aspect-ratio: 1;
  --r: 50%;
  clip-path: circle(50% at 50% 50%);
}
.ab-stop--video .ab-frame {
  width: calc(var(--px) * 1104.66);
  aspect-ratio: 1104.66 / 581;
  --r: calc(var(--px) * 45.87);
  background: #000;
}
.ab-stop--poster .ab-frame {
  width: calc(var(--px) * 948.88);
  aspect-ratio: 948.88 / 649;
  --r: calc(var(--px) * 39.4);
}
.ab-media {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* revealed as you reach it: the frame opens from its middle */
.ab-js .ab-stop:not(.is-shown) .ab-frame {
  clip-path: inset(38% 38% 38% 38% round var(--r));
  transform: scale(0.94);
  opacity: 0;
}
.ab-js .ab-stop--circle:not(.is-shown) .ab-frame { clip-path: circle(0% at 50% 50%); }

/* the focus ring sits inside: anything outside is cut by the clip-path */
.ab-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--paper);
  opacity: 0;
  pointer-events: none;
}
.ab-frame:focus-visible::after { opacity: 1; }

/* the red. A dome that rises from under the frame: on the circle it is the
   Figma ellipse (387.5 x 245.8 at 4, 172 inside the 397 circle, about half
   the frame); on the video and the poster it is a flatter dome covering
   about 45% and 50%. */
.ab-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ab-veil::before {
  content: '';
  position: absolute;
  left: var(--vl); top: var(--vt);
  width: var(--vw); height: var(--vh);
  border-radius: 50%;
  background: var(--ab-red);
  transform: translateY(calc(100% + 2px));
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ab-stop--circle .ab-veil { --vl: 1%;   --vt: 43.3%; --vw: 97.6%; --vh: 61.9%; }
.ab-stop--video  .ab-veil { --vl: -50%; --vt: 43%;   --vw: 200%;  --vh: 130%; }   /* 09-25: higher for the longer 2025 caption */
.ab-stop--poster .ab-veil { --vl: -50%; --vt: 41%;   --vw: 200%;  --vh: 130%; }

.ab-cap {
  position: absolute;
  left: 50%;
  bottom: var(--cb);
  width: var(--cw);
  margin: 0;
  translate: -50% 0;
  display: grid;
  gap: 0.35em;
  text-align: center;
  color: #FFF9EA;
  opacity: 0;
  transform: translateY(1.2em);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.ab-stop--circle .ab-cap { --cb: 12%; --cw: 58%; }
.ab-stop--video  .ab-cap { --cb: 11%; --cw: 58%; }
.ab-stop--poster .ab-cap { --cb: 9%;  --cw: 74%; }
.ab-cap-yr {
  font-family: var(--ab-hanson);
  font-weight: 700;
  font-size: max(22px, calc(var(--px) * 46));
  line-height: 1;
}
.ab-stop--circle .ab-cap-yr { font-size: max(20px, calc(var(--px) * 38)); }
.ab-cap-tx {
  font-size: max(14px, calc(var(--px) * 21));
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}
.ab-stop--circle .ab-cap-tx { font-size: max(13px, calc(var(--px) * 17)); }
/* the disciplines, as chips under the 2026 line */
.ab-cap-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em;
  margin-top: 0.5em;
  font-size: max(11px, calc(var(--px) * 15));
  font-weight: 600;
  line-height: 1;
}
.ab-cap-tags > span {
  padding: 0.5em 0.9em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 249, 234, 0.6);
  white-space: nowrap;
}

/* up on hover, on keyboard focus, and on tap (about.js sets .is-open) */
.ab-stop.is-open .ab-veil::before,
.ab-frame:focus-visible .ab-veil::before { transform: none; }
.ab-stop.is-open .ab-cap,
.ab-frame:focus-visible .ab-cap {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease) 0.2s, transform 0.7s var(--ease) 0.15s;
}
@media (hover: hover) {
  .ab-frame:hover .ab-veil::before { transform: none; }
  .ab-frame:hover .ab-cap {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease) 0.2s, transform 0.7s var(--ease) 0.15s;
  }
}

/* ============================================================
   3. The team — white mode
   ============================================================ */
/* 2026-09-25 (Aurobind): the cards were too big and ran to both screen
   edges, and an open profile was taller than the screen. Now the row runs
   in a window inset from both sides (--ab-inset), everything is about 30%
   smaller than Figma's 494 x 623, and the section (Figma 944) fits one
   screen. (09-26: the row no longer moves, so nothing fades at its edges.) */
.ab-team {
  --ab-inset: calc(var(--px) * 96);
  position: relative;
  z-index: 3;
  height: calc(var(--px) * 740);
}
/* Figma's cream, fading in with the page's own light (--lit, site.js) */
.ab-team::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ab-cream);
  opacity: var(--lit, 0);
  pointer-events: none;
}

/* 2026-09-26 (Aurobind): no more drift. The three cards stand side by
   side in the middle of the section, 56 Figma px apart, nothing moving. */
.ab-members {
  position: absolute;
  left: var(--ab-inset); right: var(--ab-inset);
  top: calc(var(--px) * 110);
  z-index: 1;
  padding-bottom: 8px;                     /* room for the + focus ring */
  transition: opacity 0.45s var(--ease);
}
.ab-track {
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 56);
}
.ab-member {
  position: relative;
  flex: none;
  width: calc(var(--px) * 340);
}
.ab-member.is-lifted .ab-card { visibility: hidden; }
.ab-card {
  position: relative;
  height: calc(var(--px) * 429);
  overflow: hidden;
  background: #D9D9D9;
}
.ab-card img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
  filter: grayscale(1);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.ab-member:hover .ab-card img { transform: scale(1.03); }

/* 2026-09-24 (Aurobind): the + is brand red, and pressing it turns the
   whole panel red — a red circle grows out of the pressed + (--cx/--cy,
   set by about.js) until it covers the section, and shrinks back into it
   on close. The profile then reads white on red. */
.ab-team::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--red, #D32F3C);
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 60%));
  transition: clip-path 0.85s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}
.ab-team.is-open::after { clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 60%)); }
.ab-team.is-open .ab-prof,
.ab-team.is-open .ab-prof-name,
.ab-team.is-open .ab-prof-bio,
.ab-team.is-open .ab-prof-links a { color: #fff; }
.ab-team.is-open .ab-prof-role { color: rgba(255, 255, 255, 0.72); }
.ab-team.is-open .ab-prof-links a { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.ab-team.is-open .ab-prof-links a:hover { box-shadow: inset 0 0 0 1px #fff; }
.ab-team.is-open .ab-x { background: #fff; color: var(--red, #D32F3C); }

/* Figma's + (118.9 across, 92 since the cards shrank 09-25), sat on the
   card's bottom edge; red since 2026-09-24 */
.ab-plus {
  position: absolute;
  left: 50%;
  top: calc(var(--px) * 375);
  width: max(48px, calc(var(--px) * 92));
  aspect-ratio: 1;
  translate: -50% 0;
  border: 0;
  border-radius: 50%;
  background: var(--red, #D32F3C);
  color: #fff;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.35s var(--ease), background 0.3s;
}
.ab-plus::before,
.ab-plus::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 44%; height: 9%;
  translate: -50% -50%;
  border-radius: 2px;
  background: currentColor;
}
.ab-plus::after { rotate: 90deg; }
.ab-plus:hover { transform: scale(1.08) rotate(90deg); }
.ab-plus:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.ab-name {
  margin: calc(var(--px) * 62) 0 0;
  text-align: center;
  font-family: var(--ab-hanson);
  font-weight: 700;
  font-size: max(15px, calc(var(--px) * 22));
  line-height: 1;
  color: var(--paper);
  transition: opacity 0.35s var(--ease);
}

/* ---- open: one person takes the left half, their profile the right ----
   The row stops and fades; a stand-in (.ab-shot) laid exactly over the
   pressed card grows to the left half, and shrinks back onto it on close. */
.ab-team.is-open .ab-members { opacity: 0; pointer-events: none; }
.ab-shot {
  position: absolute;
  z-index: 2;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  overflow: hidden;
  background: #D9D9D9;
  transition:
    left 0.85s cubic-bezier(0.7, 0, 0.2, 1),
    top 0.85s cubic-bezier(0.7, 0, 0.2, 1),
    width 0.85s cubic-bezier(0.7, 0, 0.2, 1),
    height 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}
.ab-shot[hidden] { display: none; }
.ab-shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* opened, the photo lands in the same inset the row runs in, not the whole
   left half: 500 x 600 at 1440 (it was 720 x 944) */
.ab-team.is-open .ab-shot {
  left: var(--ab-inset);
  top: calc(var(--px) * 70);
  width: calc(var(--px) * 500);
  height: calc(100% - var(--px) * 140);
}

.ab-prof {
  position: absolute;
  left: calc(var(--ab-inset) + var(--px) * 580);
  top: 0; bottom: 0;
  width: calc(var(--px) * 560);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--paper);
}
.ab-prof[hidden] { display: none; }
.ab-prof-photo { display: none; }
.ab-prof-body > * {
  opacity: 0;
  transform: translateX(40px);
}
.ab-team.is-open .ab-prof.is-on .ab-prof-body > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.ab-team.is-open .ab-prof.is-on .ab-prof-body > :nth-child(1) { transition-delay: 0.45s; }
.ab-team.is-open .ab-prof.is-on .ab-prof-body > :nth-child(2) { transition-delay: 0.52s; }
.ab-team.is-open .ab-prof.is-on .ab-prof-body > :nth-child(3) { transition-delay: 0.59s; }
.ab-team.is-open .ab-prof.is-on .ab-prof-body > :nth-child(4) { transition-delay: 0.66s; }
.ab-team.is-open .ab-prof.is-on .ab-prof-body > :nth-child(5) { transition-delay: 0.73s; }

.ab-prof-role {
  margin: 0;
  font-size: max(12px, calc(var(--px) * 15));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}
/* full names since 2026-09-18 (Aurobind). Figma's 96 fit "Sabal"; at 96
   "Shrestha" alone is wider than the 540 column, so the size came down to
   72, where every name breaks cleanly onto two lines. */
.ab-prof-name {
  margin: 0.3em 0 0;
  font-family: var(--ab-hanson);
  font-weight: 700;
  font-size: max(36px, calc(var(--px) * 60));
  line-height: 0.95;
  color: var(--paper);
}
.ab-prof-bio {
  margin: 1.2em 0 0;
  max-width: 30em;
  font-size: max(15px, calc(var(--px) * 18));
  font-weight: 400;
  line-height: 1.45;
  color: var(--paper);
}
.ab-prof-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.8em 0 0;
  padding: 0;
  list-style: none;
}
.ab-prof-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 14px;
  color: var(--paper);
  text-decoration: none;
  transition: box-shadow var(--fast) var(--ease), gap var(--fast) var(--ease);
}
.ab-prof-links a:hover { box-shadow: inset 0 0 0 1px var(--paper); gap: 12px; }

.ab-x {
  position: absolute;
  top: calc(var(--px) * 40);
  right: calc(var(--px) * 40);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 0.4s var(--ease), transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.ab-x[hidden] { display: none; }
.ab-team.is-open .ab-x { opacity: 1; transform: none; transition-delay: 0.5s; }
.ab-x svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.ab-x:hover { transform: rotate(90deg); transition-delay: 0s; }
.ab-x:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ============================================================
   4. Mirrorless Collaborators — REBUILT 2026-09-25 from Figma 242:263
   (the 09-24 version, with the drifting lines and the balls coming out of
   the column, is in about.css.bak-0925). Red #D01440 under the lockup,
   which now stands still at Figma's size (MIRRORLESS 1180, COLLABORATORS
   1398 wide: it fits the page, so it is always readable). Then the post
   box pins, fitted to the screen, the collaborators ring round it and the
   ring turns with the scroll (about.js, initCollab).
   --u is one Figma px of the post box: Figma's size, or smaller if the
   whole box (1497 tall) would not fit 92% of the screen.
   ============================================================ */
@font-face {
  font-family: 'Neutral Face';
  src: url('fonts/neutralface-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Neutral Face by Vadym Aksieiev, SIL Open Font License (free for
   commercial use; the licence travels with the font file). */
.ab-collab {
  position: relative;
  z-index: 2;
  background: #D01440;
}
.ab-cw {
  margin: 0;
  padding-top: calc(var(--px) * 54.6);
  font-size: 1rem;
  text-align: center;
}
.ab-cw-lock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Neutral Face', var(--display);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.ab-cw-lock > span:first-child { font-size: calc(var(--px) * 180); }
.ab-cw-lock > span:last-child { font-size: calc(var(--px) * 131.794); margin-top: calc(var(--px) * -2); }

.ab-cnote {
  max-width: max(300px, calc(var(--px) * 640));
  margin: calc(var(--px) * 44) auto 0;
  padding: 0 16px calc(var(--px) * 40);
  font-size: max(14px, calc(var(--px) * 19));
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
  color: rgba(255, 255, 255, 0.88);
}

/* the post box and the ring. Red behind the top of the box, black by its
   foot, as Figma fades it (a multiply to black from mid-box down). */
.ab-ring {
  --u: min(var(--px), calc(92svh / 1497));
  --pin: 385svh;                                 /* 7 turns, a bit over half a screen each */
  position: relative;
  background: #000;
}
.ab-ring-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--u) * 40) 0;
  overflow-x: clip;
  background: linear-gradient(to bottom, #D01440 0, #D01440 42%, #000 88%);
}
/* 2026-09-26 (Aurobind): a little black over the foot of the post box, so
   the stone base sinks into the black and the footer follows on without a
   seam. Full width, so it has no edges of its own against the red fade:
   from the bottom of the stage up to a quarter of the box. */
.ab-ring-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * (40 + 1497 * 0.25));
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.92) 80%, #000 100%);
}
.ab-ring.is-live .ab-ring-stage::after {
  height: calc((100svh - var(--u) * 1497) / 2 + var(--u) * 1497 * 0.25);
}
.ab-ring.is-live { height: calc(100svh + var(--pin)); }
.ab-ring.is-live .ab-ring-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0;
}
.ab-ring-field {
  position: relative;
  flex: none;
  width: calc(var(--u) * 952);
  height: calc(var(--u) * 1497);
}
.ab-col {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%; height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
/* Ellipse 508: the soft shadow the base stands in */
.ab-col-shadow {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 1422);
  width: calc(var(--u) * 984);
  height: calc(var(--u) * 106);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  z-index: 1;
}
/* what the poster says: the name and, when we have them, the two links.
   Figma Group 274: icons at 300 · 466, the name at 300 · 582 */
.ab-poster {
  position: absolute;
  left: calc(var(--u) * 300);
  top: calc(var(--u) * 466);
  width: calc(var(--u) * 360);
  z-index: 4;
  color: #fff;
}
.ab-poster-links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 21.25);
  height: calc(var(--u) * 85);
  margin: 0; padding: 0;
  list-style: none;
}
.ab-poster-links a {
  display: block;
  width: calc(var(--u) * 31.875);
  height: calc(var(--u) * 31.875);
  min-width: 18px; min-height: 18px;
  color: #fff;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ab-poster-links a[hidden] { display: none; }
.ab-poster-links a:hover { transform: scale(1.12); }
.ab-poster-links a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.ab-poster-links svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.ab-poster-name {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 116);
  margin: 0;
  font-family: 'Georama', var(--sans);
  font-weight: 800;
  font-size: max(15px, calc(var(--u) * 48));
  line-height: 1.17;
  white-space: nowrap;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.ab-poster-name.is-swap { opacity: 0; transform: translateY(0.35em); }
/* when we have their link, the name is it (about.js) */
.ab-poster-name a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}
.ab-poster-name a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.14em; }
.ab-poster-name a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.ab-poster-go { display: inline-block; margin-left: 0.2em; font-size: 0.6em; vertical-align: 0.5em; transition: transform 0.3s var(--ease); }
.ab-poster-name a:hover .ab-poster-go { transform: translate(0.1em, -0.1em); }

/* the collaborators: round photos floating round the post box. Every one
   is Figma's front size (353); about.js places, scales and layers each one
   round the ring, in front of the post box or behind it. The container sets
   no z-index, so each one's own z-index sorts it against the box.
   2026-09-25 (Aurobind): no more sphere shading or gloss, and no glow round
   them; just the photo in a circle, bobbing. (The shaded version is in
   about.css.bak-0925b.) */
.ab-balls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ab-ball {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--u) * 353);
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 3;
}
/* the photo is a link to them (about.js sets the href) */
a.ab-ball[href] { pointer-events: auto; }
.ab-ball-in {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #2A2A2A;
  animation: ab-bob var(--bob, 6s) ease-in-out calc(var(--i) * -0.8s) infinite;
}
.ab-ball-in > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ab-ball:nth-child(3n + 1) { --bob: 6.8s; }
.ab-ball:nth-child(3n + 2) { --bob: 5.4s; }
@keyframes ab-bob {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 calc(var(--u) * -10); rotate: 2deg; }
}

/* this page's footer is black, and sits over the balls so they sink
   behind it (Aurobind, 2026-09-24) */
body[data-foot="dark"] .foot {
  position: relative;
  z-index: 3;
  background: #000;
  border-top-color: transparent;
}

/* ============================================================
   The note (fixed, outside <main>)
   ============================================================ */
.ab-note {
  position: fixed;
  inset: 0;
  z-index: 400;                          /* over the sticky nav (300) */
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.ab-note[hidden] { display: none; }
.ab-note-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 10, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ab-note-card {
  --w: min(440px, 84vw, calc((100svh - 96px) * 0.617));
  position: relative;
  width: var(--w);
  aspect-ratio: 503 / 816;               /* the poster's own proportion */
  transform-style: preserve-3d;
  will-change: transform;
}
.ab-note-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.3);
}
/* the back is the poster it came off: red, with the lens */
.ab-note-back {
  display: grid;
  place-items: center;
  background: #D32F3C;
  transform: rotateY(180deg);
}
.ab-note-back img { width: 62%; height: auto; }

.ab-note-front {
  display: flex;
  flex-direction: column;
  padding: calc(var(--w) * 0.075);
  background: var(--ab-cream);
  color: #D32F3C;
}
/* the lens, big and cropped off the right edge, where the poster has its crescent */
.ab-note-front::before {
  content: '';
  position: absolute;
  right: -30%;
  top: 9%;
  width: 82%;
  aspect-ratio: 1;
  background: url('../Logo/Artboard%2027.png') center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.ab-note-front > * { position: relative; }
.ab-note-top {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-family: var(--ab-hanson);
  font-weight: 700;
  font-size: calc(var(--w) * 0.034);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ab-note-msg {
  margin: auto 0 0;
  font-family: var(--ab-hanson);
  font-weight: 700;
  font-size: calc(var(--w) * 0.092);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.ab-note-sign {
  margin: 1.1em 0 0;
  font-size: calc(var(--w) * 0.03);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(211, 47, 60, 0.75);
}
.ab-note-actions {
  display: flex;
  gap: 8px;
  margin-top: calc(var(--w) * 0.07);
}
.ab-note-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  transition: filter var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.ab-note-again { background: #D32F3C; color: #FFF9EA; }
.ab-note-again:hover { filter: brightness(1.1); }
.ab-note-close { background: transparent; color: #D32F3C; box-shadow: inset 0 0 0 1.5px rgba(211, 47, 60, 0.5); }
.ab-note-close:hover { box-shadow: inset 0 0 0 1.5px #D32F3C; }
.ab-note-actions button:focus-visible { outline: 3px solid #131112; outline-offset: 3px; }

html.ab-lock { overflow: hidden; scrollbar-gutter: stable; }

/* ============================================================
   Phones — one column, sized to the hand
   ============================================================ */
@media (max-width: 760px) {
  .ab-hero {
    --hx: calc(100cqw / 700);
    height: calc(var(--hx) * 1340);
  }
  /* smaller mailers, pulled in so each shows most of itself */
  .ab-bag { width: calc(var(--hx) * 590); }
  .ab-bag--1 { --cx: 450 !important; --cy: 560 !important; }
  .ab-bag--2 { --cx: 1010 !important; --cy: 250 !important; }
  .ab-title { font-size: min(calc(var(--hx) * 128), 13.4cqw); top: calc(var(--hx) * 830); }
  .ab-intro { top: calc(var(--hx) * 1010); font-size: 18px; line-height: 1.35; }

  .ab-journey { padding: 56px 0 64px; }
  .ab-stop--circle .ab-frame { width: min(72vw, 320px); }
  .ab-stop--video .ab-frame,
  .ab-stop--poster .ab-frame { width: calc(100cqw - 32px); }
  /* square on a phone (2026-09-26 mobile sweep): at the desktop's wide
     ratios the frames were ~190 and ~245px tall and the red dome, with a
     five-line caption in it, covered nearly all of the picture */
  .ab-stop--video .ab-frame { --r: 20px; aspect-ratio: 1; }
  .ab-stop--poster .ab-frame { --r: 18px; aspect-ratio: 1; }
  .ab-stop--video, .ab-stop--poster { margin-top: 72px; }
  .ab-stop + .ab-stop::before {
    height: 56px;
    background: repeating-linear-gradient(to bottom, #D9D9D9 0 10px, transparent 10px 20px);
  }
  .ab-stop--video  .ab-veil { --vt: 44%; }
  .ab-stop--poster .ab-veil { --vt: 36%; }
  .ab-stop--video  .ab-cap, .ab-stop--poster .ab-cap { --cw: 88%; --cb: 8%; }
  .ab-cap-tags { font-size: 11px; gap: 5px; }
  .ab-cap-yr { font-size: 22px; }
  .ab-cap-tx { font-size: 14px; }
  .ab-stop--circle .ab-cap-tx { font-size: 12.5px; }

  /* the same three in a row, sized to the hand; a + under each */
  .ab-team { height: auto; padding: 64px 0 56px; --ab-card-w: calc((100vw - 32px - 24px) / 3); }
  .ab-members { position: relative; top: auto; left: auto; right: auto; margin-inline: 16px; }
  .ab-track { gap: 12px; }
  .ab-member { width: var(--ab-card-w); }
  .ab-card { height: calc(var(--ab-card-w) * 1.26); }
  .ab-plus { top: calc(var(--ab-card-w) * 1.26 - 20px); width: 40px; }
  .ab-name { margin-top: 32px; }
  .ab-shot { display: none !important; }

  /* open on a phone: the row steps aside, the profile stacks photo over text */
  .ab-team.is-open .ab-members { display: none; }
  .ab-prof {
    position: relative;
    left: auto; top: auto; bottom: auto;
    width: auto;
    padding: 0 16px;
  }
  .ab-prof-photo {
    display: block;
    width: 72%;
    height: auto;                         /* or the height="" attribute wins over the ratio */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: var(--pos, 50% 30%);
    margin-bottom: 28px;
  }
  .ab-prof-body > * { transform: translateY(20px); }
  .ab-x { top: 84px; right: 28px; }

  /* the section no longer changes on open (the profile is a sheet, below) */
  .ab-team.is-open .ab-members { display: block; opacity: 1; pointer-events: auto; }
  .ab-team.is-open::after { clip-path: circle(0 at var(--cx, 50%) var(--cy, 60%)); }
}

/* ---- phones: the profile as a card over the page (2026-09-26) ----
   about.js moves the open .ab-prof and the x into .ab-sheet on <body>.
   The page dims; a red card, centred on the screen (his ask, same day),
   grows out of the pressed + (--ox/--oy) with a small pop, and
   the profile reads white on it: photo and name side by side, the bio
   and links under them. The card scrolls on its own if the bio is long. */
html.ab-locked { overflow: hidden; }
.ab-sheet {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  padding: 16px 14px max(16px, env(safe-area-inset-bottom));
  background: rgba(8, 8, 8, 0.62);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.ab-sheet.is-open { opacity: 1; }
.ab-sheet__card {
  position: relative;
  width: 100%;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px;
  background: var(--red, #D32F3C);
  color: #fff;
  clip-path: circle(0 at var(--ox, 50%) var(--oy, 100%));
  scale: 0.92;
  transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1), scale 0.8s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ab-sheet.is-open .ab-sheet__card { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 100%)); scale: 1; }
.ab-sheet .ab-prof {
  position: static;
  width: auto;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 16px;
  align-items: end;
  padding: 22px 20px 26px;
  color: #fff;
}
.ab-sheet .ab-prof-body { display: contents; }
.ab-sheet .ab-prof-photo {
  display: block;
  grid-column: 1; grid-row: 1 / span 2;
  width: 112px; height: auto;
  aspect-ratio: 4 / 5;
  margin: 0;
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
  border-radius: 12px;
  filter: grayscale(1);
}
.ab-sheet .ab-prof-role { grid-column: 2; grid-row: 1; align-self: end; color: rgba(255, 255, 255, 0.75); font-size: 11px; }
.ab-sheet .ab-prof-name { grid-column: 2; grid-row: 2; margin: 6px 0 0; font-size: 26px; line-height: 1; color: #fff; }
.ab-sheet .ab-prof-bio {
  grid-column: 1 / -1;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #fff;
}
.ab-sheet .ab-prof-links { grid-column: 1 / -1; margin-top: 20px; }
.ab-sheet .ab-prof-links a { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
/* the text arrives after the red, as it does on the desktop */
.ab-sheet .ab-prof-body > * { opacity: 0; transform: translateY(14px); }
.ab-sheet.is-open .ab-prof-body > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease) 0.35s, transform 0.6s var(--ease) 0.3s;
}
.ab-sheet .ab-x {
  position: sticky;
  float: right;
  top: 12px;
  right: auto;
  margin: 12px 12px -56px 0;
  width: 44px; height: 44px;
  background: #fff;
  color: var(--red, #D32F3C);
  z-index: 2;
}
.ab-sheet.is-open .ab-x { opacity: 1; transform: none; transition-delay: 0.35s; }
@media (max-width: 760px) {

  /* the collaborators on a phone: the lockup to the width, the post box
     a little wider than Figma's share of it so the ring fills the screen */
  .ab-cnote { font-size: 14px; margin-top: 18px; padding-bottom: 28px; }
  .ab-ring { --u: min(calc(100cqw / 1150), calc(80svh / 1497)); }
  /* 2026-09-26 (Aurobind): the pinned stage centres a post box that is only
     ~60% of a phone's height, so ~170px of empty red sat between the note
     and the box. Pull the ring up into that room; the note (same red as
     the stage's top) stays over it. */
  .ab-ring.is-live { margin-top: calc((var(--u) * 1497 - 100svh) / 2 + 16px); }
  /* the ring's own #000 showed as a black line behind the note once the
     ring was pulled up under it: red for its top half, black below (the
     stage covers the rest), 2026-09-26 */
  .ab-ring { background: linear-gradient(#D01440 0 50%, #000 50%); }
  .ab-collab { margin-top: -1px; }         /* no hairline seam under the cream */
  /* room above the lockup, and the note runs wider so it is not a narrow
     five-line column (his ask, same day) */
  .ab-cw { position: relative; z-index: 3; padding-top: 64px; }
  .ab-cnote {
    position: relative; z-index: 3;
    max-width: 36em;
    padding-inline: 24px;
    font-size: 15px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-js .ab-bag-fly,
  .ab-js .ab-ch > span,
  .ab-js .ab-intro { opacity: 1; transform: none; animation: none !important; }
  .ab-hero.is-in .ab-bag-float { animation: none; }
  .ab-bag-par { transition: none; }
  .ab-js .ab-stop:not(.is-shown) .ab-frame { clip-path: none; transform: none; opacity: 1; }
  .ab-frame, .ab-veil::before, .ab-cap, .ab-members, .ab-shot, .ab-x { transition-duration: 0.01s !important; }
  .ab-ball-in { animation: none; }
  .ab-poster-name { transition: none; }
}