/* Shared neutral surface for volunteer cards and avatars. */
.volunteer-team { color: var(--ink-strong); font-family: var(--font-ui); padding: 96px 0; scroll-margin-top: 100px; }
.volunteer-label { color: var(--purple); font-size: var(--text-ui-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.volunteer-head { display: flex; flex-direction: column; gap: 14px; }
.volunteer-head h2 { margin: 0; color: var(--ink-strong); font-family: var(--font-display); font-size: var(--text-section); font-weight: 700; line-height: 1.15; }
.volunteer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.volunteer-card { position: relative; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: var(--volunteer-surface); }
.volunteer-photo-link { display: block; }
.volunteer-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; }
/* No portrait yet: pale lilac with purple initials (UI/UX review: solid purple blocks outweighed the real photos). */
.volunteer-initials { display: grid; place-items: center; background: var(--purple-tint); color: var(--purple); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; }
.volunteer-card-text { padding: 18px 20px; min-width: 0; }
.volunteer-sample-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--volunteer-surface); color: var(--purple); font: 700 var(--text-ui-2xs) var(--font-ui); }
.volunteer-card h3, .community-page .co .volunteer-card h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--text-story-title); font-weight: 700; line-height: 1.3; }
.volunteer-card p { margin: 0 0 10px; color: var(--muted-strong); font-size: var(--text-ui); line-height: 1.55; }
.volunteer-card p:last-child { margin-bottom: 0; }
.volunteer-card:focus-within, .volunteer-card:hover { border-color: var(--line-control); box-shadow: var(--shadow-card); }
.volunteer-team > .wrap { display: flex; flex-direction: column; gap: 32px; }
.volunteer-card h3 a { color: var(--ink-strong); text-decoration: none; }
.volunteer-card h3 a:hover, .volunteer-card h3 a:focus-visible { color: var(--purple); }
/* Long names and roles wrap to two lines instead of being cut ("Community engagement volun…"; UI/UX review). */
.volunteer-card h3, .volunteer-card .volunteer-role { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.volunteer-role { font-weight: 600; }
/* Students page, Student Board cards: the university under the role. */
.student-board .volunteer-card .volunteer-role { margin-bottom: 4px; }
/* On the Students page's lilac band, the pale lilac placeholder disappeared into the band: white, with a line above the text. */
.student-board .volunteer-initials { background: var(--volunteer-surface); border-bottom: 1px solid var(--line-soft); }
/* Smaller cards (the user's request, 2026-10-29: four 305 × 479px cards a row made the section 1,323px tall): six
   across on computers, so a board of six is one row, with lighter text; three on tablets, at most 760px wide; two on
   phones. */
@media (min-width: 1181px) {
  .student-board .volunteer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 601px) {
  .student-board .volunteer-card-text { padding: 12px 14px 14px; }
  .student-board .volunteer-card h3, .community-page .co.student-board .volunteer-card h3 { margin-bottom: 4px; font-size: var(--text-ui-md); }
  .student-board .volunteer-card p { font-size: var(--text-ui-xs); line-height: 1.45; }
  .student-board .volunteer-card .volunteer-role { margin-bottom: 2px; }
  .student-board .volunteer-card .volunteer-affiliation { font-size: var(--text-ui-xs); }
}
@media (min-width: 601px) and (max-width: 1180px) { .student-board .volunteer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 760px; } }
.volunteer-card .volunteer-affiliation { font-size: var(--text-ui-sm); }
@media (max-width: 600px) { .volunteer-card .volunteer-affiliation { font-size: var(--text-ui-xs); } }
/* PMWB and Students pages: the team as one compact link to the Volunteer teams page (faces, heading, count). */
.volunteer-team-teaser { padding: 48px 0; font-family: var(--font-ui); }
.volunteer-teaser { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: var(--purple-wash-hover); color: var(--ink-strong); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.volunteer-teaser:hover { border-color: var(--line-control); box-shadow: var(--shadow-card); }
.volunteer-teaser:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.volunteer-teaser-faces { display: flex; flex-shrink: 0; }
.volunteer-teaser-face { display: grid; place-items: center; width: 48px; height: 48px; margin-left: -12px; border: 3px solid var(--purple-wash-hover); border-radius: var(--radius-round); background: var(--purple); color: #fff; font-size: var(--text-ui-xs); font-weight: 700; object-fit: cover; object-position: center top; /* The whole portrait (pmilc_avatar_image()), from the top: the head is never cut. */ }
.volunteer-teaser-face:first-child { margin-left: 0; }
.volunteer-teaser-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.volunteer-teaser-text strong { font-family: var(--font-display); font-size: var(--text-ui-step); line-height: 1.3; }
.volunteer-teaser-text > span:last-child { color: var(--muted-strong); font-size: var(--text-ui-sm); font-weight: 700; }
.volunteer-teaser-more { background: var(--purple-tint-ui); color: var(--purple); }
.volunteer-teaser-go { flex-shrink: 0; margin-left: auto; color: var(--purple); font-size: var(--text-ui-sm); font-weight: 700; }
.volunteer-teaser:hover .volunteer-teaser-text strong { color: var(--purple); }
@media (max-width: 600px) { .volunteer-team-teaser { padding: 32px 0; } .volunteer-teaser { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; } .volunteer-teaser-face { width: 40px; height: 40px; } .volunteer-teaser-go { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .volunteer-teaser { transition: none; } }
@media (max-width: 1180px) { .volunteer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .volunteer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .volunteer-team { padding: 56px 0; } .volunteer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .volunteer-photo { aspect-ratio: 3 / 4; } .volunteer-card-text { padding: 12px 14px; } .volunteer-card h3, .community-page .co .volunteer-card h3 { font-size: var(--text-ui-md); } .volunteer-card p { font-size: var(--text-ui-xs); } }

/* ==========================================================================
   Volunteer teams page (page-volunteer-teams.php; UI/UX review, October 2026):
   the hero's team card and the Team Mosaic (template-parts/volunteer-mosaic.php).
   Each team has its duotone: the portraits are grey, multiplied by the team's
   light colour and lightened by Night, so the shadows are Night and the
   highlights lilac (PMWB) or cyan (Students). Hover, keyboard focus or, on
   touch screens, the middle of the screen (volunteer-teams.js .is-lit) fades
   the duotone out to the photo's own colours.
   ========================================================================== */
/* --vt-accent: the team's colour on each caption's top bar and the label's dot (fourth UI/UX review: with captions
   under the photos the teams looked like any card grid). */
.vt-team--pmwb { --vt-dark: var(--ds-night); --vt-light: #C7B2FF; --vt-accent: var(--violet); }
.vt-team--students { --vt-dark: var(--ds-night); --vt-light: #CDF5FB; --vt-tint: .55; --vt-accent: var(--cyan-ring); } /* Paler and lighter: high-contrast photos read as cyan X-rays (third and fourth UI/UX reviews). */
.community-page .vt-team .co-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: var(--radius-round); background: var(--vt-accent); vertical-align: 1px; }

/* Hero: fits its content, as the list pages' .hero--fit (components.css), so the first team starts on the first
   screen (UI/UX review: at 1440 × 900 the full-screen hero showed no volunteer); its foot and the first team's top
   are every hero's 96px (were 72px and 56px; uniform heroes, 2026-10-27), 40px above the team on phones. */
@media (min-width: 768px) {
  main > .co-hero.vt-hero { min-height: 0; }
  .community-page .vt-hero .co-hero-text { padding-top: 16px; }
  .community-page .vt-hero + .vt-team { padding-top: 96px; }
  .community-page .vt-cta { padding-bottom: 72px; } /* Night panel and Night footer read as one close. */
}
/* 900–1180px: text and team card side by side, as the Member insights / PMWB / Students heroes (not stacked with
   the card alone on the left). */
@media (min-width: 900px) and (max-width: 1180px) {
  .community-page .vt-hero .co-hero-grid:not(.co-hero-grid--single) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
  .community-page .vt-hero .co-hero-text { padding-top: 0; }
  .community-page .vt-hero h1 { font-size: clamp(2.5rem, 4.4vw, 3.25rem); }
  .community-page .vt-hero .co-hero-media { max-width: none; margin: 0; }
  .community-page .vt-hero-card { padding: 24px; }
  .vt-hero-team { gap: 12px; padding: 12px 14px; }
  .vt-hero-face { width: 38px; height: 38px; margin-left: -11px; }
  .vt-hero-face:nth-child(n + 4) { display: none; }
}

/* Hero: the frosted card lists the teams and jumps to them. */
.community-page .vt-hero-media { display: flex; justify-content: flex-end; }
.community-page .vt-hero-card { display: flex; flex-direction: column; gap: 18px; }
.vt-hero-teams { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vt-hero-team { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 14px 18px; border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: #fff; color: var(--ink-strong); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.vt-hero-team:hover { border-color: var(--line-control); box-shadow: var(--shadow-card); color: var(--ink-strong); }
.vt-hero-team > svg { flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; color: var(--purple); }
.vt-hero-faces { display: flex; flex-shrink: 0; }
.vt-hero-face { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; border: 3px solid #fff; border-radius: var(--radius-round); background: var(--purple); color: #fff; font-size: var(--text-ui-2xs); font-weight: 700; object-fit: cover; object-position: center top; /* The whole portrait (pmilc_avatar_image()), from the top: the head is never cut. */ }
.vt-hero-face:first-child { margin-left: 0; }
.vt-hero-team-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-hero-team-text strong { font-family: var(--font-display); font-size: var(--text-ui-lg); line-height: 1.3; transition: color .15s ease; }
.vt-hero-team:hover strong { color: var(--purple); }
.vt-hero-team-text span { color: var(--muted-strong); font-size: var(--text-ui-sm); font-weight: 600; }

/* Teams: white, then the second on a lilac band, so each reads as its own block. */
.community-page .vt-team { padding: 72px 0; scroll-margin-top: var(--header-height); }
.community-page .vt-team + .vt-team { background: var(--purple-wash-hover); }
.community-page .vt-team-inner { display: flex; flex-direction: column; gap: 36px; }
/* Team head: label and heading, then the text and the program link; from 1181px the text and link sit beside the
   heading (third UI/UX review: about 50px less before the photos). */
.community-page .vt-team-head { display: flex; flex-direction: column; gap: 14px; }
.community-page .vt-team-aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.community-page .vt-team-aside p { flex: 1 1 420px; max-width: 800px; margin: 0; color: var(--muted-ui); font-size: var(--text-ui-md); line-height: 1.6; text-wrap: pretty; }
@media (min-width: 1181px) {
  /* The text and link start level with the label (fourth UI/UX review: their top stood 18px above it). */
  .community-page .vt-team-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; gap: 40px; }
  .community-page .vt-team-aside { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .community-page .vt-team-aside p { flex: none; font-size: var(--text-ui); }
}
/* Closing panel: the Community pages' light lilac panel (the user's request, 2026-10-27: lighter than Night), with the
   orange button (dark text) and the standard secondary one. */
.vt-label-count { white-space: nowrap; }
/* No word alone on the last line ("Borders.", "· 6 VOLUNTEERS"). */
.community-page .vt-team :is(.co-label, h2) { text-wrap: balance; }
.community-page .vt-team + .co-cta { padding-top: 72px; }
/* PMWB page: the stories after the team (.co-action has no top space of its own). */
.community-page .vt-team + .co-action { padding-top: 72px; }
/* PMWB page: the team on the light lilac wash (second UI/UX review: after the dark Blueprint, the white team and the
   white stories ran together), with the "You" tile white as on the Volunteer teams page's second team; the intro
   under the heading in balanced lines (a lone "Borders." on the last line). */
.community-page .co.vt-team--band { background: var(--purple-wash-hover); } /* .co: over community.css's white .co, which loads after. */
.vt-team--band .vt-join { background: #fff; }
.vt-team--band :is(.vt-join-seat, .vt-join-plus) { background: var(--purple-wash-hover); }
.community-page .vt-team--band .co-head p { max-width: 720px; text-wrap: balance; }

/* Mosaic: six columns (four, three, two on smaller screens), 4:5 tiles; the lead tile 2 × 2. Six, so a team of six
   fills one row on computers (third UI/UX review: five left one photo beside a 1021px "You" banner). */
.vt-mosaic { --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
/* Each tile: the whole portrait (4:5) with the name and role in a white caption under it, not over the photo (the
   user's request, 2026-10-27: the plate covered a third of each picture). */
.vt-tile { position: relative; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.vt-tile:not(.vt-join):hover { border-color: var(--line-control); box-shadow: var(--shadow-card); }
.vt-tile.is-lead { grid-column: span 2; grid-row: span 2; }
.vt-tile:has(:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; overflow: visible; }
.community-page .co .vt-link:focus-visible { outline: none; }
.vt-link { display: flex; flex-direction: column; height: 100%; color: var(--ink-strong); text-decoration: none; }
.vt-photo { position: relative; flex: none; overflow: hidden; aspect-ratio: 4 / 5; isolation: isolate; background: var(--vt-dark); }
.vt-tile.is-lead .vt-photo { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
/* A soft duotone (UI/UX review: full strength washed PMWB faces out and gave Students an X-ray look): the photo keeps
   some of its colour and the two layers are at 75%, so skin tones come through. */
.vt-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(.6) contrast(1.05); transition: filter .5s ease, transform .6s ease; }
.vt-photo::before, .vt-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; opacity: var(--vt-tint, .75); pointer-events: none; transition: opacity .5s ease; }
.vt-photo::before { background: var(--vt-light); mix-blend-mode: multiply; }
.vt-photo::after { background: var(--vt-dark); mix-blend-mode: lighten; }
.vt-photo:has(.vt-initials)::before, .vt-photo:has(.vt-initials)::after { display: none; }
/* Browsers without blend modes: the photo in its own colours rather than grey under flat colour. */
@supports not (mix-blend-mode: multiply) {
  .vt-photo img { filter: none; }
  .vt-photo::before, .vt-photo::after { display: none; }
}
.vt-initials { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 30%; color: var(--vt-light); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; }
.vt-tile:is(:hover, :focus-within, .is-lit) .vt-photo img { filter: none; transform: scale(1.04); }
.vt-tile:is(:hover, :focus-within, .is-lit) .vt-photo::before, .vt-tile:is(:hover, :focus-within, .is-lit) .vt-photo::after { opacity: 0; }

/* The frosted name plate: name and role always readable (up to two lines each). */
.vt-plate { flex: none; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; border-top: 3px solid var(--vt-accent); background: #fff; }
.vt-name, .vt-role, .vt-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vt-name { color: var(--ink-strong); font-family: var(--font-display); font-size: var(--text-ui-md); font-weight: 700; line-height: 1.3; transition: color .15s ease; }
/* Two lines kept for every role, so the plates are one height and the names in a row line up (third UI/UX review). */
.vt-role { min-height: 2.8em; color: var(--muted-strong); font-size: var(--text-ui-xs); font-weight: 600; line-height: 1.4; }
/* Up to three lines (the six-column tiles cut "Operating Model, NGO Public Liaison & Project…"); the photos are one
   height, so the names still line up. */
.vt-tile .vt-role { -webkit-line-clamp: 3; }
.vt-summary { -webkit-line-clamp: 3; margin-top: 6px; color: var(--muted-ui); font-size: var(--text-ui); line-height: 1.5; }
.vt-tile:is(:hover, :focus-within) .vt-name { color: var(--purple); }
.vt-tile.is-lead .vt-plate { gap: 4px; padding: 18px 22px 20px; }
.vt-tile.is-lead .vt-name { font-size: var(--text-story-title); }
.vt-tile.is-lead .vt-role { font-size: var(--text-ui); }
.vt-sample { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 4px 10px; border-radius: var(--radius-pill); background: #fff; color: var(--purple); font: 700 var(--text-ui-2xs) var(--font-ui); pointer-events: none; }

/* "You": the space left in the last row, to the Volunteer form with the team's program selected. */
/* Lilac on the white team, white on the lilac band; across two or more columns, a banner (container query). */
/* One column: the "+" seat, "You", the line and the link. Two or more: a banner (container query) with two empty
   dashed seats before the "+", the line in Sora 20px and the link as a small pill; a row of its own is a slim strip. */
/* A solid fill, dashes only on the empty seats (fourth UI/UX review: a dashed box read as an empty placeholder). */
.vt-join { grid-column: span var(--rest6); aspect-ratio: auto; min-height: 120px; container-type: inline-size; border: 1px solid var(--line-soft); background: var(--purple-wash-hover); transition: border-color .15s ease, background-color .15s ease; }
.vt-team + .vt-team .vt-join { background: #fff; }
.vt-join:hover { border-color: var(--line-control); box-shadow: var(--shadow-card); }
.vt-join .vt-link { position: static; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; height: 100%; padding: 22px; }
.vt-join-body { display: flex; flex-direction: column; gap: 4px; }
.vt-join-seats { display: flex; flex-shrink: 0; }
.vt-join-seat { display: none; width: 48px; height: 48px; margin-right: -12px; border: 2px dashed var(--line-control); border-radius: var(--radius-round); background: #fff; }
.vt-team + .vt-team .vt-join-seat { background: var(--purple-wash-hover); }
.vt-join-plus { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-round); background: var(--purple-wash); color: var(--purple); font: 700 1.75rem/1 var(--font-display); }
.vt-team + .vt-team .vt-join-plus { background: var(--purple-wash-hover); }
.vt-join-name { color: var(--purple); font-size: var(--text-ui-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vt-join-text { color: var(--ink-strong); font-family: var(--font-display); font-size: var(--text-ui-md); font-weight: 700; line-height: 1.35; }
.vt-join-cta { color: var(--purple); font-size: var(--text-ui-sm); font-weight: 700; }
@container (min-width: 320px) {
  .vt-join .vt-link { flex-direction: row; align-items: center; justify-content: center; gap: 24px; padding: 20px 28px; }
  .vt-join-seat { display: block; }
  .vt-join-text { font-size: var(--text-ui-step); }
  .vt-join-cta { flex-shrink: 0; display: inline-flex; align-items: center; height: var(--ds-button-sm); padding: 0 20px; border-radius: var(--radius-pill); background: var(--purple); color: #fff; }
}
@container (min-width: 320px) and (max-width: 559px) {
  .vt-join .vt-link { flex-direction: column; gap: 12px; text-align: center; }
  .vt-join-body { align-items: center; }
}
.vt-join:hover .vt-join-cta { background: var(--purple-press); }
@container (max-width: 319px) { .vt-join:hover .vt-join-cta { background: none; } }

/* The phones' "Swipe to meet all 10 →" (volunteer-mosaic.php). */
.vt-swipe { display: none; margin: -8px 0 0; color: var(--muted-strong); font-size: var(--text-ui-xs); font-weight: 700; }
@media (min-width: 1181px) {
  /* Five columns where six would leave a lone portrait beside a wide "You" banner (volunteer-mosaic.php). */
  .vt-mosaic--5 { --cols: 5; }
  .vt-mosaic--5 .vt-join { grid-column: span var(--rest5); }
  .vt-tile:not(.is-lead) .vt-plate { padding: 10px 12px 12px; }
  .vt-tile:not(.is-lead) .vt-name { font-size: .9375rem; letter-spacing: -.01em; }
}
@media (max-width: 1180px) {
  .vt-mosaic { --cols: 4; }
  .vt-join { grid-column: span var(--rest4); }
}
@media (max-width: 899px) {
  .vt-mosaic { --cols: 3; }
  .vt-join { grid-column: span var(--rest3); }
  /* Stacked hero (768–899px): the card spans the column. */
  .community-page .vt-hero-media { justify-content: flex-start; }
  .community-page .vt-hero .co-hero-media { max-width: none; margin: 0; }
  .community-page .vt-hero-card { max-width: none; }
}
@media (max-width: 767px) {
  .community-page .vt-team { padding: 48px 0; }
  .community-page .vt-hero + .vt-team { padding-top: 40px; }
  .community-page .vt-team-inner { gap: 24px; }
  .community-page .vt-team + .co-cta { padding-top: 44px; }
  .community-page .vt-team + .co-action { padding-top: 48px; }
  .community-page .vt-hero-card { padding: 20px; }
  .vt-hero-team { min-height: 64px; padding: 10px 14px; gap: 12px; }
  /* Phones: tighter team rows (each name on one line). */
  .vt-hero-team { gap: 10px; padding: 10px 12px; }
  .vt-hero-team > svg { width: 16px; height: 16px; }
  .vt-hero-face { width: 30px; height: 30px; margin-left: -9px; border-width: 2px; }
  .vt-hero-face:nth-child(n + 4) { display: none; }
  .vt-hero-team-text strong { font-size: .9375rem; }
  .vt-hero-team-text span { font-size: var(--text-ui-xs); }
  .community-page .vt-hero-card .glass-card-label { font-size: var(--text-ui-2xs); } /* 12px, not the shared card's 11px. */
}
@media (max-width: 559px) {
  /* Phones: each team is one row that swipes sideways, the next portrait peeking in and the "You" card last (fourth
     UI/UX review: as a 2-column grid each team was about 1,350px tall; the Community stories and the event gallery
     use the same pattern on phones). */
  .vt-mosaic { grid-auto-flow: column; grid-auto-columns: 70%; grid-template-columns: none; gap: 12px; margin: 0 -21px; padding: 2px 21px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 21px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .vt-mosaic::-webkit-scrollbar { display: none; }
  .vt-mosaic > li { scroll-snap-align: start; }
  .vt-swipe { display: block; }
  .vt-tile:has(:focus-visible) { outline-offset: -3px; } /* Inside the row, which clips what overflows it. */
  .vt-tile.is-lead { grid-column: auto; grid-row: auto; }
  .vt-tile.is-lead .vt-photo { flex: none; aspect-ratio: 4 / 5; }
  .vt-join { grid-column: auto; min-height: 0; }
  .vt-plate { gap: 2px; padding: 10px 12px 12px; }
  .vt-name { font-size: .9375rem; }
  .vt-role { font-size: var(--text-ui-xs); }
  .vt-tile.is-lead .vt-plate { padding: 12px 16px 14px; }
  .vt-tile.is-lead .vt-name { font-size: var(--text-ui-lg); }
  .vt-tile.is-lead .vt-role { font-size: var(--text-ui-xs); }
  .vt-summary { display: none; }
  .vt-sample { top: 6px; left: 6px; padding: 3px 8px; }
  .vt-join .vt-link { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-photo img, .vt-photo::before, .vt-photo::after, .vt-tile, .vt-name, .vt-join, .vt-hero-team { transition: none; }
  .vt-tile:is(:hover, :focus-within, .is-lit) .vt-photo img { transform: none; }
}

/* A team of two shows only "Next" (single-volunteer.php): on phones, in the right-hand column as on the Board profiles. */
.member-steps > .member-pos:first-child + .member-step--next { grid-column: 2; }