/* ==========================================================================
   Team page + one page per person (2026-10-19). Loaded by team.html and team/*.html after site.css.
   Built by tools/build_team.py from tools/team.json.
   ========================================================================== */

/* Clicking a person on the team page carries their photo into the profile page (and back again):
   cross-document View Transitions, Chrome/Edge 126+ and Safari 18.2+. team-grid.js plays a look-alike
   elsewhere. Only the photo morphs: the page itself cross-fades underneath, and the big name slides
   up on its own once the photo has landed, so no two motions fight (round 12, Lucas: "smoother"). */
@view-transition { navigation: auto; }
::view-transition-group(*.person){ animation-duration: .9s; animation-timing-function: cubic-bezier(.65,0,.25,1); z-index: 10; }
/* Same picture on both pages. Going in, the team page's copy (always on screen, never blank) carries the move and
   hands over to the profile's copy in the second half; if the profile's photo were still loading, the move would
   otherwise show a white square (Lucas, round 14). */
::view-transition-old(*.person), ::view-transition-new(*.person){ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
::view-transition-old(*.person){ animation: vt-photo-out .9s linear both; }
::view-transition-new(*.person){ animation: vt-photo-in .9s linear both; }
@keyframes vt-photo-out{ 0%, 55%{ opacity:1; } 100%{ opacity:0; } }
@keyframes vt-photo-in{ 0%, 45%{ opacity:0; } 100%{ opacity:1; } }
/* on the way back to the team page, show the big sharp photo leaving the profile, not the small card copy */
html:active-view-transition-type(to-team)::view-transition-old(*.person){ animation:none; opacity:1; }
html:active-view-transition-type(to-team)::view-transition-new(*.person){ display:none; }
/* on the way back the team page is drawn straight away (its cards fill in on their own); the profile fades off */
html:active-view-transition-type(to-team)::view-transition-new(root){ animation: vt-in .25s ease both; }
html:active-view-transition-type(to-team)::view-transition-old(root){ animation: vt-out .3s ease both; }
/* everyone else's photo (no partner on the other page) just fades with the page */
::view-transition-old(*.person):only-child{ display:block; animation: vt-out .35s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(*.person):only-child{ animation: vt-in .55s cubic-bezier(0,0,.2,1) .25s both; }
::view-transition-old(root){ animation: vt-out .35s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation: vt-in .55s cubic-bezier(0,0,.2,1) .25s both; }
@keyframes vt-out{ to{ opacity:0; } }
/* the header is on both pages: keep it in place instead of cross-fading two copies */
.site-header{ view-transition-name: site-header; }
::view-transition-group(site-header){ animation-duration: .9s; animation-timing-function: cubic-bezier(.65,0,.25,1); }
::view-transition-old(site-header){ animation: vt-out .3s both; }
::view-transition-new(site-header){ animation: vt-in .3s both; }
@keyframes vt-in{ from{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
}

/* ---------- team page ---------- */
/* round 23 (Lucas): fewer lines and less of a break between the two groups; advisors a little bigger (wider
   container), the office team much bigger than before (3 across instead of 6) but still smaller than the advisors */
.team-wide{ max-width: 1480px; }
.team-group + .team-group{ margin-top: clamp(2.6rem, 5vw, 4rem); }
.team-group-label{ font-family: var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted); margin: 0 0 1.2rem; }
.team-grid.advisors{ grid-template-columns: repeat(4,1fr); gap: clamp(1.2rem,2vw,2rem); }
.team-grid.office{ grid-template-columns: repeat(6,1fr); gap: clamp(1rem,1.6vw,1.6rem); } /* Lucas: 4 on top, 6 below (with Zac) */
.team-grid.office .team-info h3{ font-size: clamp(1.15rem,1.45vw,1.4rem); }
.team-grid.office .team-title{ font-size:.62rem; letter-spacing:.1em; }
@media (max-width: 1180px){ .team-grid.office{ grid-template-columns: repeat(3,1fr); } }
.team-group-label{ text-align:center; }
@media (max-width: 980px){ .team-grid.advisors{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){
  .team-grid.advisors, .team-grid.office{ grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .team-grid .team-info h3{ font-size: 1.2rem; }
  .team-grid .team-title{ font-size:.6rem; letter-spacing:.1em; }
}
/* square cards, the same shape as the photo on the profile page, so the photo moving between them only scales
   (a 4:5 card cropped the square photo's sides at the end of the move; Lucas: "clipping") */
.team-grid .team-photo{ aspect-ratio: 1 / 1; }
.team-grid .team-photo img{ object-position: 50% 50%; }
/* coming back from a profile: the other cards fill in around the photo as it settles (team-grid.js adds .vt-fill) */
.reveal.vt-fill{ animation: vtFill .75s cubic-bezier(.16,1,.3,1) both; }
@keyframes vtFill{ from{ opacity:0; transform: translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
a.team-card{ display:block; color:inherit; text-decoration:none; scroll-margin-top: 22vh; } /* the profile's back link lands on team.html#<slug>: keep the card clear of the fixed header */
a.team-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 6px; }
a.team-card:target:focus-visible{ outline:none; } /* landing back on #<slug> focuses the card; no ring for that */
.team-card .creds{ font-size:.62em; letter-spacing:.02em; color: var(--muted); white-space:nowrap; }
.team-more{ display:inline-flex; align-items:center; gap:.45em; margin-top:.2rem; font-size:.78rem; font-weight:600; color: var(--ink-soft);
  border-bottom:1px solid transparent; padding-bottom:.15em; transition: border-color .3s var(--ease), gap .3s var(--ease), color .3s var(--ease); }
.team-more svg{ width:.95em; height:.95em; }
a.team-card:hover .team-more, a.team-card:focus-visible .team-more, .team-more:hover{ border-color: var(--ink); gap:.7em; }

/* fallback "fly to centre" when the browser has no cross-page view transitions (team-grid.js) */
.fly-photo{ position:fixed; z-index:1001; margin:0; overflow:hidden; border-radius: var(--radius); pointer-events:none;
  box-shadow: 0 40px 90px -30px rgba(20,30,12,.45); }
.fly-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.fly-veil{ position:fixed; inset:0; z-index:1000; background: var(--paper); opacity:0; pointer-events:none; }

/* ---------- profile page ---------- */
/* .hero is only there so site.js leaves the name alone; undo the home hero's full-screen layout */
.profile-hero.hero{ min-height:0; display:block; }
.profile-hero{ padding: calc(var(--header-h) + clamp(3rem,5vw,4.6rem)) 0 clamp(1rem,2vw,1.6rem); overflow:hidden; overflow:clip; position:relative; } /* clip, not hidden: the sticky photo needs the page as its scroller */
.profile-hero::before{ content:""; position:absolute; left:50%; top:45%; width:min(1300px,130vw); aspect-ratio:1; transform:translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(150,201,63,.10), rgba(247,163,31,.05) 55%, transparent 72%); pointer-events:none; }
.profile-back{ display:inline-flex; align-items:center; gap:.5em; font-size:.8rem; font-weight:600; letter-spacing:.06em; color: var(--ink-soft);
  border-bottom:1px solid transparent; position:relative; z-index:2; }
.profile-back:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.profile-back svg{ width:1em; height:1em; }
.profile-head{ text-align:center; position:relative; z-index:2; margin-top: -.4rem; }
.profile-name{ font-family: var(--font-display); font-weight:500; line-height:1; letter-spacing:-.02em; margin:0;
  font-size: clamp(3rem, 8.6vw, 8rem); color: var(--ink); }
.profile-name .w{ display:inline-block; overflow:hidden; padding: 0 .02em .14em; margin: 0 -.02em -.14em; vertical-align:top; }
.profile-name .w > span{ display:inline-block; }
.profile-name .last{ font-style:italic; color: var(--accent-deep); }
.profile-role{ margin-top: clamp(.5rem,1vw,.8rem); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--brand-deep); }
.profile-role .creds{ color: var(--muted); letter-spacing:.08em; }
.profile-role .sep{ display:inline-block; width:1.6em; height:1px; background: var(--rule-strong); vertical-align:middle; margin:0 .8em; }

/* arrival: the name rises out of a mask word by word (brand motion: expo out, small stagger), then the rest fades up */
@keyframes nameUp{ from{ transform: translateY(105%); } to{ transform:none; } }
@keyframes profileUp{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes profileFade{ from{ opacity:0; } }
.js-anim .profile-name .w > span{ animation: nameUp 1s cubic-bezier(.16,1,.3,1) .3s both; }
.js-anim .profile-name .w + .w > span{ animation-delay: .38s; }
.js-anim .profile-role{ animation: profileUp .8s cubic-bezier(.16,1,.3,1) .55s both; }
.js-anim .stage-bar{ animation: profileUp .8s cubic-bezier(.16,1,.3,1) .75s both; }
.js-anim .stage-item .fun-btn{ animation: profileFade .6s ease 1s both; } /* opacity only: its transform places it */
.js-anim .stage-item:not(:first-child){ animation: profileFade .9s ease .6s both; }
@media (prefers-reduced-motion: reduce){
  .js-anim .profile-name .w > span, .js-anim .profile-role, .js-anim .stage-bar, .js-anim .stage-item, .js-anim .stage-item .fun-btn{ animation:none; }
}

/* ---------- gallery stage: the main photo in front, the others in a 3D ring behind it ---------- */
.stage{ position:relative; z-index:1; height: clamp(380px, calc(100svh - 395px), 780px); margin-top: clamp(.8rem,1.6vw,1.4rem);
  perspective: 1900px; perspective-origin: 50% 45%; touch-action: pan-y; user-select:none; -webkit-user-select:none; outline:none; }
.stage.is-dragging{ cursor: grabbing; }
.stage-item{ position:absolute; left:50%; top:50%; margin:0; transform-style: preserve-3d; will-change: transform, opacity;
  transition: transform .8s var(--ease), opacity .8s var(--ease), filter .8s var(--ease); }
.stage.is-dragging .stage-item{ transition:none; }
.stage-photo{ position:relative; display:block; width:100%; height:100%; padding:0; border:0; background: var(--paper-deep); cursor:pointer;
  border-radius: 3px; overflow:hidden; box-shadow: 0 30px 70px -28px rgba(20,30,12,.45), 0 8px 22px -12px rgba(20,30,12,.25); }
.stage-photo img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; }
.stage-photo img.fun-swap{ position:absolute; inset:0; }
.stage-item.is-front .stage-photo{ cursor: zoom-in; }
.stage-photo:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.stage-item:not(.is-front) img{ filter: saturate(.85); }

/* "Click me!": a speech bubble just outside the photo's top-right corner, so it never competes with opening the photo */
.fun-btn{ position:absolute; top:0; left:100%; transform: translate(-28%, -62%); z-index:3; border:0; cursor:pointer; white-space:nowrap;
  font: 700 .8rem/1 var(--font-body); letter-spacing:.04em; color: var(--forest); background: var(--accent); padding: .75em 1.05em; border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(20,30,12,.5); transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s; }
.fun-btn::after{ content:""; position:absolute; left:16%; bottom:-6px; border: 7px solid transparent; border-bottom:0; border-top-color: var(--accent);
  transform: skewX(-18deg); transition: border-color .3s; }
.fun-btn:hover{ background: #ffb43d; transform: translate(-28%, -70%); }
.fun-btn:hover::after{ border-top-color: #ffb43d; }
.fun-btn:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }
.fun-btn.pop{ animation: funPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes funPop{ 0%{ scale:.85; } 100%{ scale:1; } }
.stage-item:not(.is-front) .fun-btn{ opacity:0; pointer-events:none; }
@media (max-width: 620px){ .fun-btn{ transform: translate(-70%, -60%); font-size:.74rem; } .fun-btn:hover{ transform: translate(-70%, -66%); } }

/* one row under the photo: arrows either side of the title and count */
.stage-bar{ display:grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items:center; gap: 1rem; width: min(560px, calc(100% - 2*var(--gutter)));
  margin: clamp(.6rem,1.4vw,1rem) auto 0; position:relative; z-index:2; }
.stage-meta{ text-align:center; }
.stage-title{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.2rem,1.6vw,1.4rem); color: var(--ink); line-height:1.2; }
.stage-caption{ font-size:.9rem; color: var(--ink-soft); margin-top:.15em; }
.stage-count{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.16em; color: var(--muted); margin-top:.3em; font-variant-numeric: tabular-nums lining-nums; }
.stage-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--rule-strong); background: var(--white); color: var(--ink);
  display:grid; place-items:center; cursor:pointer; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.stage-btn:hover{ border-color: var(--ink); transform: translateY(-1px); }
.stage-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.stage-btn svg{ width:18px; height:18px; }
.stage.single + .stage-bar .stage-btn, .stage.single + .stage-bar .stage-count{ visibility:hidden; }
@media (max-width: 620px){ .stage{ height: min(96vw, 58vh); } }

/* ---------- bio ---------- */
.profile-body{ padding: clamp(2.2rem,4vw,3.4rem) 0 clamp(3rem,6vw,5rem); }
.profile-grid{ display:grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem,6vw,6rem); align-items:start; }
.profile-aside{ position:sticky; top: calc(var(--header-h) + 2rem); }
.profile-aside h2{ font-family: var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); margin:0 0 1rem; }
.profile-contact{ display:flex; flex-direction:column; gap:.55rem; font-size:.98rem; }
.profile-contact a{ color: var(--ink); border-bottom:1px solid var(--rule-strong); align-self:flex-start; }
.profile-contact a:hover{ border-bottom-color: var(--ink); }
.profile-contact .where{ color: var(--ink-soft); }
.profile-bio p{ font-size: 1.06rem; line-height:1.8; color: var(--ink-soft); max-width: 64ch; }
.profile-bio p + p{ margin-top: 1.15em; }
/* every paragraph in the same font (round 23, Asher: the first paragraph was in the big serif, so a one-paragraph bio
   like Kara's was all serif and a short first line like Sherrie's looked like a heading) */
@media (max-width: 860px){ .profile-grid{ grid-template-columns:1fr; } .profile-aside{ position:static; } }

/* ---------- round 23: "middle of the road" (Lucas chose it from the layout mockups) ----------
   The photo on the left (it stays in view while a long bio scrolls), the name, role, contact and bio on the right,
   so the bio starts in the first screen. On phones it stacks: photo, then name and bio. */
.profile-side{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2rem,5vw,4.5rem); align-items:start;
  margin-top: clamp(1.4rem,2.6vw,2.2rem); position:relative; z-index:1; }
.side-photo{ position:sticky; top: calc(var(--header-h) + 2rem); }
.stage.stage-side{ height:auto; aspect-ratio: 1 / 1; margin-top:0; perspective: 1600px; }
.side-text .profile-head{ text-align:left; margin-top:0; }
.side-text .profile-name{ font-size: clamp(2.8rem, 5.6vw, 5.2rem); }
.side-text .profile-contact{ flex-direction:row; flex-wrap:wrap; gap:.5rem 1.4rem; margin: clamp(1rem,1.6vw,1.4rem) 0 clamp(1.6rem,2.4vw,2.2rem); font-size:.95rem; }
.side-text .profile-bio p{ max-width: 66ch; }
.js-anim .side-text .profile-contact{ animation: profileUp .8s cubic-bezier(.16,1,.3,1) .65s both; }
.js-anim .side-text .profile-bio{ animation: profileUp .8s cubic-bezier(.16,1,.3,1) .75s both; }
@media (prefers-reduced-motion: reduce){ .js-anim .side-text .profile-contact, .js-anim .side-text .profile-bio{ animation:none; } }
@media (max-width: 860px){
  .profile-side{ grid-template-columns: 1fr; gap: 1.6rem; }
  .side-photo{ position:static; width: min(100%, 520px); }
}

/* ---------- previous / next person ---------- */
.profile-next{ border-top:1px solid var(--rule); margin-top: clamp(2.5rem,5vw,4rem); }
.profile-next .container{ display:grid; grid-template-columns: 1fr 1fr; }
.profile-next a{ display:flex; align-items:center; gap: 1.1rem; padding: clamp(1.6rem,3vw,2.4rem) 0; color: var(--ink); }
.profile-next a + a{ justify-content:flex-end; text-align:right; border-left:1px solid var(--rule); padding-left: 1.2rem; }
.profile-next img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 20%; flex:none; }
.profile-next small{ display:block; font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.profile-next strong{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.3rem,2.2vw,1.8rem); }
.profile-next a:hover strong{ color: var(--accent-deep); }
@media (max-width: 560px){ .profile-next img{ display:none; } .profile-next strong{ font-size:1.15rem; } }

/* ---------- lightbox: full screen, zoom and pan ---------- */
.lightbox{ position:fixed; inset:0; z-index:2000; background: rgba(13,20,9,.96); display:none; color:#f3f1e8; touch-action:none; }
.lightbox.is-open{ display:block; animation: lbIn .35s var(--ease); }
@keyframes lbIn{ from{ opacity:0; } }
.lb-view{ position:absolute; inset: 64px 0 96px; overflow:hidden; cursor: grab; }
.lb-view.is-panning{ cursor: grabbing; }
.lb-view img{ position:absolute; left:50%; top:50%; max-width: 92vw; max-height: 100%; transform-origin: 0 0; user-select:none; -webkit-user-drag:none;
  will-change: transform; transition: transform .35s var(--ease), opacity .3s var(--ease); }
.lb-view.no-anim img{ transition: opacity .3s var(--ease); }
.lb-top{ position:absolute; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between; padding: 0 clamp(12px,3vw,28px); }
.lb-count{ font-size:.78rem; font-weight:600; letter-spacing:.14em; color: rgba(243,241,232,.7); font-variant-numeric: tabular-nums lining-nums; }
.lb-tools{ display:flex; gap:.5rem; }
.lb-btn{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(243,241,232,.25); background: rgba(243,241,232,.06); color:#f3f1e8;
  display:grid; place-items:center; cursor:pointer; transition: background .25s var(--ease), border-color .25s var(--ease); }
.lb-btn:hover{ background: rgba(243,241,232,.14); border-color: rgba(243,241,232,.5); }
.lb-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lb-btn svg{ width:18px; height:18px; }
.lb-prev, .lb-next{ position:absolute; top:50%; transform: translateY(-50%); width:52px; height:52px; }
.lb-prev{ left: clamp(8px,2vw,24px); } .lb-next{ right: clamp(8px,2vw,24px); }
.lb-cap{ position:absolute; left:0; right:0; bottom:0; height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 0 1rem; }
.lb-cap .t{ font-family: var(--font-display); font-style:italic; font-size: 1.35rem; }
.lb-cap .c{ font-size:.88rem; color: rgba(243,241,232,.72); margin-top:.15em; max-width: 60ch; }
@media (max-width: 620px){ .lb-prev, .lb-next{ display:none; } .lb-view{ inset: 58px 0 88px; } }

/* ---------- Zac: feeding (round 16) ---------- */
/* Paul 2026-10-24: placed by screen height so it floats under the waterline (the water fills 86%), not on it */
.zac-feed{ position:fixed; z-index:902; left:50%; top: calc(14vh + 5.5rem); transform: translate(-50%, -8px); opacity:0;
  pointer-events:none; font: 700 .9rem/1 var(--font-body); letter-spacing:.04em; color: var(--forest);
  background: var(--accent); padding: .85em 1.3em; border-radius: 999px; box-shadow: 0 12px 30px -12px rgba(10,30,20,.55);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.zac-feed::before{ content:""; display:inline-block; width: 1.3em; height: .5em; margin-right:.6em; vertical-align: middle;
  border-radius: .25em; background: linear-gradient(#c9784a, #a8502b 40%, #6e2d17); box-shadow: inset -.18em 0 0 #d9946a; transform: rotate(-12deg); }
.zac-feed.is-on{ opacity:1; transform: translate(-50%, 0); animation: zacFeedPulse 2.4s ease-in-out 1s infinite; }
@keyframes zacFeedPulse{ 0%, 100%{ box-shadow: 0 12px 30px -12px rgba(10,30,20,.55), 0 0 0 0 rgba(247,163,31,.45); }
  50%{ box-shadow: 0 12px 30px -12px rgba(10,30,20,.55), 0 0 0 10px rgba(247,163,31,0); } }
html.zac-feeding, html.zac-feeding body{ cursor: pointer; }
@media (prefers-reduced-motion: reduce){ .zac-feed.is-on{ animation:none; } }