/* ==========================================================================
   JPSA — page-specific sections
   ========================================================================== */

/* ================= HOME ================= */
/* The hero: black and full screen, with members' faces faint behind the text and the giant JPSA
   at its foot. The faces, the word and the grain are decoration (aria-hidden in the markup); the
   words are the h1, the line, the chips and the buttons. Back to front: the light (motion.css),
   the faces, a dark gradient where the text stands, the word, the text, the grain. */
.home-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(36px, 6vw, 84px) clamp(56px, 8vw, 112px);
  background: var(--black);
  color: #fff;
}
.home-hero__grid { position: relative; z-index: 8; }
.home-hero__grid > div { max-width: 760px; }
.home-hero .kicker { color: var(--yellow); }
.home-hero__title { font-size: var(--fs-hero); line-height: 0.84; color: #fff; }
.home-hero__title .line { display: block; }
.home-hero__title .dot { color: var(--yellow); } /* red is too faint on black; red stays for Join JPSA */
.home-hero__sub {
  margin-top: 22px;
  max-width: 21ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
  line-height: 1.18;
  color: rgba(255, 255, 255, 0.9);
}
.home-hero__meta { margin-top: 24px; }
.home-hero .cluster.actions { margin-top: 32px; }
/* Chips: clear outlines on the dark, the first one filled. */
.home-hero .chip { background: rgba(0, 0, 0, 0.35); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.7); }
.home-hero .chip--dark { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
/* Join JPSA stays red and leads; the second button is a light outline. */
.home-hero .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.75); background: rgba(0, 0, 0, 0.25); }
.home-hero .btn--outline:hover { background: #fff; color: var(--black); border-color: #fff; }

/* The faces, grey and faint, filling the hero from the top. */
.home-hero__faces {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-content: start;
  overflow: hidden;
  opacity: 0.24;
  filter: grayscale(1) contrast(1.1);
}
.home-hero__faces img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; } /* height: auto, or the HTML height wins over the square */
/* Darker where the text stands, so the faces are felt, not read. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.2) 100%);
}
/* A stronger grain in the hero, over the site's own. */
.home-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: hard-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
}
@media (max-width: 900px) {
  /* Phones and tablets: the text covers the whole hero, so it is darkened evenly, and the faces
     show about as clearly as on the right of a wide screen (the text keeps its contrast; measured). */
  .home-hero__faces { grid-template-columns: repeat(5, 1fr); opacity: 0.36; }
  .home-hero::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.5) 100%); }
}
@media print, (forced-colors: active) { .home-hero__faces, .home-hero__grain { display: none; } }

/* The giant JPSA at the foot of the hero, in JPSA red, cut by the hero's edge. Everything it needs
   from the hero is scoped with :has(), so without the word the hero is exactly as before. */
.home-hero:has(> .home-hero__word) {
  --word: var(--word-size, 23vw);         /* font size */
  --word-show: calc(var(--word) * 0.607); /* how much of the letters shows (Anton caps are 0.867em; 30% is cut off) */
  --word-gap: clamp(16px, 2vw, 32px);
  padding-bottom: calc(var(--word-gap) + var(--word-show));
}
.home-hero__word {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--word) * -0.338); /* baseline 0.26em below the hero's edge (the line box keeps 0.078em under it) */
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(12px, 2vw, 40px);
  font-family: var(--font-display);
  font-size: var(--word);
  line-height: 1;
  color: var(--red);
  opacity: var(--word-opacity, 0.65);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) {
  /* Phones and tablets: a little smaller. */
  .home-hero:has(> .home-hero__word) { --word: min(var(--word-size, 23vw), 28vw); }
}

/* Manifesto */
.manifesto { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.manifesto__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.manifesto__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.manifesto__line {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: #cfcfcf;
  transition: color 700ms var(--ease);
}
.manifesto__line.is-visible { color: var(--ink); }
.manifesto__line .n { flex: none; min-width: 2.2em; font-family: var(--font-body); font-size: 0.95rem; font-weight: 800; color: var(--red); }
.manifesto__close {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 2px solid var(--black);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
}
.manifesto__close strong { font-family: var(--font-display); font-style: normal; font-weight: 400; color: var(--red); text-transform: uppercase; }
@media (max-width: 900px) {
  .manifesto { grid-template-columns: 1fr; }
  .manifesto__aside { position: static; }
}

/* About */
.about-stats { margin-top: clamp(40px, 6vw, 72px); padding-top: 32px; border-top: 2px solid var(--black); }
.tri-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Journey timeline */
.journey { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 12px; }
.journey::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.journey__progress {
  position: absolute;
  left: 0; top: 33px;
  width: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
  transition: width 1800ms var(--ease);
}
.journey.is-visible .journey__progress { width: 100%; }
.journey__item { position: relative; padding: 66px 16px 0 0; }
.journey__dot {
  position: absolute;
  top: 24px; left: 0;
  width: 22px; height: 22px;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  background: var(--black);
}
.journey__item:last-child .journey__dot { background: var(--yellow); box-shadow: 0 0 0 6px rgba(253, 216, 46, 0.25); }
.journey__year { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; color: var(--yellow); }
.journey__abbr { margin-top: 10px; font-weight: 800; font-size: 1.1rem; color: #fff; }
.journey__name { margin-top: 4px; font-size: 0.92rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; }
  .journey::before { left: 10px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .journey__progress { display: none; }
  .journey__item { padding: 0 0 30px 50px; }
  .journey__dot { top: 6px; }
}

/* IPSF */
.ipsf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .ipsf-grid { grid-template-columns: 1fr; } }
.fact-list { border-top: 2px solid var(--black); }
.fact {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 2px solid var(--black);
}
.fact__k { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1; }
.fact__v { font-weight: 600; line-height: 1.45; }
.section--black .fact-list, .section--black .fact { border-color: rgba(255, 255, 255, 0.22); }
.section--black .fact__k { color: var(--yellow); }

/* Mission & vision */
.mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.mv__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 340px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--radius-lg);
  color: #fff;
}
.mv__card--mission { background: var(--red); }
.mv__card--vision { background: var(--black); }
.mv__label { font-family: var(--font-display); font-size: clamp(2.8rem, 5.4vw, 4.4rem); line-height: 0.9; text-transform: uppercase; }
.mv__card--vision .mv__label { color: var(--yellow); }
.mv__text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.25; }
.mv__icon { position: absolute; right: 26px; top: 26px; width: 44px; height: 44px; opacity: 0.9; }
@media (max-width: 820px) { .mv { grid-template-columns: 1fr; } }

.values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Why JPSA */
.why { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.why__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; }
.why__words { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.why__words li {
  padding: 6px 14px;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  text-transform: uppercase;
  line-height: 1.2;
}
.why__words li:nth-child(3n + 1) { background: var(--yellow); }
.why__words li:nth-child(3n + 2) { background: var(--black); color: #fff; }
.why__body p + p { margin-top: 1em; }
.why__closing { margin-top: 22px; font-weight: 700; font-size: 1.2rem; }
@media (max-width: 960px) { .why { grid-template-columns: 1fr; } }

.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 72px); }
.benefit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.benefit:hover { transform: translateY(-3px); border-color: var(--black); box-shadow: var(--shadow); }
.benefit .icon-badge { flex: none; width: 46px; height: 46px; margin: 0; border-radius: 12px; }
.benefit .icon-badge .icon { width: 22px; height: 22px; }
.benefit h3 { font-size: 1.07rem; margin-bottom: 4px; }
.benefit p { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 960px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .benefits { grid-template-columns: 1fr; } }

.eligibility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--black);
  color: #fff;
}
.eligibility .icon { width: 26px; height: 26px; color: var(--yellow); }
.eligibility p { flex: 1 1 280px; }
.eligibility strong { color: var(--yellow); }

/* Family */
.structure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.structure__card { padding-top: 22px; border-top: 4px solid var(--red); }
.structure__card:nth-child(2) { border-color: var(--yellow); }
.structure__card:nth-child(3) { border-color: #fff; }
.structure__card h3 { color: #fff; margin: 10px 0 8px; }
.structure__card p { color: rgba(255, 255, 255, 0.74); }
.structure__num { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; color: var(--yellow); }
@media (max-width: 820px) { .structure { grid-template-columns: 1fr; } }
.family-wall { margin-block: clamp(48px, 7vw, 88px); }
.family-lines { margin-top: 22px; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.35; color: #fff; }

/* Teams explorer */
.teams { display: grid; grid-template-columns: minmax(230px, 0.8fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.teams__list { display: grid; gap: 10px; align-content: start; }
.team-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  text-align: start;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.team-tab:hover { border-color: var(--black); }
.team-tab .icon { width: 22px; height: 22px; color: var(--red); }
.team-tab[aria-selected="true"] { border-color: var(--black); background: var(--black); color: #fff; }
.team-tab[aria-selected="true"] .icon { color: var(--yellow); }
.team-panel {
  padding: clamp(26px, 4vw, 52px);
  border: 2px solid var(--black);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-block);
  animation: panel-in 420ms var(--ease);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.team-panel__top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.team-panel h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 0.95; text-transform: uppercase; }
.team-panel__tag { margin-top: 12px; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.2; color: var(--red); }
.team-panel__body { margin-top: 18px; color: var(--ink-2); max-width: 64ch; }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.4; }
.checks .icon { margin-top: 1px; width: 20px; height: 20px; color: var(--red); }
.team-panel .text-link { margin-top: 26px; }
@media (max-width: 860px) {
  .teams { grid-template-columns: 1fr; }
  .teams__list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; }
  .checks { grid-template-columns: 1fr; }
}

/* ================= SEP ================= */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.way { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-lg); }
.way--out { background: var(--red); color: #fff; }
.way--in { background: var(--yellow); color: var(--black); }
.way__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.way--in .way__icon { background: var(--black); color: var(--yellow); }
.way__icon .icon { width: 30px; height: 30px; }
.way h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 0.95; text-transform: uppercase; }
.way p { font-size: 1.08rem; }
.way--out p { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 820px) { .ways { grid-template-columns: 1fr; } }

.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .fields { grid-template-columns: 1fr; } }
.field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-weight: 700; }
.field .icon { width: 22px; height: 22px; color: var(--red); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { position: relative; padding: 26px; border: 2px solid var(--black); border-radius: var(--radius); background: #fff; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--red);
}
.step h3 { font-size: 1.15rem; margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 0.97rem; }
.step__action { margin-top: 16px; }
/* A last step alone on its row takes the whole row (seven steps: 3 + 3 + 1 on wide screens). */
.step:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .step:last-child:nth-child(3n + 1) { grid-column: auto; }
  .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 20px; border-radius: var(--radius); background: var(--yellow-soft); font-size: 0.97rem; }
.note .icon { margin-top: 2px; width: 20px; height: 20px; color: var(--red); }

.jordan-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jtile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 340px;
  padding: 22px;
  border-radius: var(--radius);
  color: #fff;
  isolation: isolate;
}
.jtile .art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.jtile::after { content: ""; position: absolute; inset: 40% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); }
.jtile h3 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.jtile p { font-size: 0.95rem; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 960px) { .jordan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .jordan-tiles { grid-template-columns: 1fr; } .jtile { min-height: 260px; } }

/* ================= CONFERENCES ================= */
.feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); overflow: hidden; border: 2px solid var(--black); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-block); }
.feature__side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 52px); background: var(--red); color: #fff; }
.feature__big { font-family: var(--font-display); font-size: clamp(7rem, 17vw, 13rem); line-height: 0.8; color: var(--yellow); }
.feature__big sup { font-size: 0.34em; vertical-align: top; margin-left: 4px; }
.feature__body { padding: clamp(28px, 4vw, 52px); }
.feature__body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; text-transform: uppercase; }
.feature__theme { margin-top: 12px; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; color: var(--red); }
.feature__body p { margin-top: 16px; color: var(--ink-2); }
.feature__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.feature__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

.quote-band { max-width: 34ch; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.8rem, 3.8vw, 3.1rem); line-height: 1.18; }
.quote-band::before { content: "“"; display: block; height: 0.55em; font-family: var(--font-display); font-style: normal; font-size: 2.2em; line-height: 1; color: var(--yellow); }

.patrons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.patron { display: flex; gap: 18px; align-items: center; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); background: #141414; }
.patron__mono { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); color: var(--black); font-family: var(--font-display); font-size: 1.35rem; }
.patron__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.patron__name { margin-top: 2px; font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: #fff; }
/* The event and year that tie each name to JPSA. */
.patron__event { margin-top: 6px; font-size: 0.92rem; line-height: 1.45; color: rgba(255, 255, 255, 0.75); }
/* One name: a card the width of a paragraph, not half the page. Three: one row on wide screens. */
.patrons--1 { grid-template-columns: minmax(0, 560px); }
@media (min-width: 961px) { .patrons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .patrons { grid-template-columns: 1fr; } }

.event-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.event-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 2px dashed var(--black); border-radius: var(--radius); background: #fff; }
.event-card__when { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--black); color: var(--yellow); font-size: 0.82rem; font-weight: 700; }
.event-card__when .icon { width: 15px; height: 15px; }
.event-card h3 { font-size: 1.25rem; }
.event-card p { color: var(--ink-2); font-size: 0.98rem; }
.event-card__where { display: flex; gap: 8px; align-items: center; margin-top: auto; font-size: 0.92rem; font-weight: 600; color: var(--ink-3); }
.event-card__where .icon { width: 16px; height: 16px; color: var(--red); }
.event-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-card .icon-badge { margin-bottom: 4px; }
@media (max-width: 960px) { .event-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .event-cards, .event-cards--2 { grid-template-columns: 1fr; } }

.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.moment { position: relative; overflow: hidden; margin: 0; border-radius: var(--radius); background: var(--gray); }
.moment img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--ease); }
.moment:hover img { transform: scale(1.04); }
.moment figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 720px) { .moments { grid-template-columns: 1fr 1fr; } .moment:last-child { display: none; } }

/* ================= PORTFOLIOS ================= */
.portfolio { scroll-margin-top: calc(var(--header-h) + 72px); }
.portfolio__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; margin-bottom: clamp(32px, 4vw, 56px); }
.portfolio__num { font-family: var(--font-display); font-size: clamp(5rem, 12vw, 10rem); line-height: 0.8; color: var(--accent, var(--red)); }
.portfolio__tag { margin-top: 14px; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.15; color: var(--accent, var(--red)); }
.portfolio__intro { margin-top: 18px; max-width: 70ch; }
.portfolio__intro p + p { margin-top: 1em; }
.section--yellow .portfolio__num, .section--yellow .portfolio__tag { color: var(--black); }
.section--black .portfolio__num, .section--black .portfolio__tag { color: var(--yellow); }
@media (max-width: 640px) { .portfolio__head { grid-template-columns: 1fr; } }
/* A section without a number (the Student Exchange Programme): the heading takes the full width. */
.portfolio__head--plain { grid-template-columns: minmax(0, 1fr); }

/* Photos from a portfolio's big events (content.js: gallery). Shown only once photos are added. */
.event-gallery { display: grid; gap: clamp(28px, 4vw, 44px); margin-top: clamp(40px, 5vw, 64px); }
.event-gallery__title { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.event-gallery__when { margin-top: 4px; font-size: 0.92rem; font-weight: 600; opacity: 0.75; }
/* Each photo shows whole, at its own shape: today's event photos carry a frame along their bottom
   edge, and cropping them to one shape would cut it. Rows line up on that bottom edge. */
.event-gallery__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin-top: 16px; }
.event-gallery__photos img { width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 720px) { .event-gallery__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.item-card { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-top: 4px solid var(--accent, var(--red)); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.item-card .icon-badge { margin-bottom: 10px; }
.item-card h3 { font-size: 1.2rem; }
.item-card p { color: var(--ink-2); font-size: 0.98rem; }
.item-card .text-link { margin-top: auto; padding-top: 8px; }
.section--yellow .item-card { border-top-color: var(--black); }
.section--black .item-card { background: #141414; color: #fff; border-top-color: var(--yellow); }
.section--black .item-card p { color: rgba(255, 255, 255, 0.76); }

.highlight { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 24px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--black); color: #fff; }
.highlight__num { font-family: var(--font-display); font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 1; color: var(--yellow); }
.highlight p { flex: 1 1 320px; font-size: 1.08rem; color: rgba(255, 255, 255, 0.86); }
.highlight strong { color: #fff; }

/* JPSA Talks: a yearly event with a theme and six speakers, so a bigger block than the podcast below it. */
.talks { display: grid; gap: clamp(28px, 4vw, 44px); margin-top: 24px; padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-lg); background: var(--black); color: #fff; }
.talks__name { font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 400; line-height: 0.95; text-transform: uppercase; color: var(--yellow); }
.talks__tagline { margin-top: 12px; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.2; }
.talks__text { margin-top: 16px; max-width: 64ch; color: rgba(255, 255, 255, 0.84); }
.talks__edition { padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.talks__edition-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.talks__edition > p { margin-top: 10px; color: rgba(255, 255, 255, 0.84); }
.talks__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 18px 0 0; padding: 0; list-style: none; }
.talks__list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-weight: 600; }
.talks__num { flex: none; min-width: 1.6em; font-family: var(--font-display); color: var(--yellow); }
@media (max-width: 720px) { .talks__list { grid-template-columns: minmax(0, 1fr); } }

.podcast { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: 24px; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--black); color: #fff; }
.podcast h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 0.95; text-transform: uppercase; }
.podcast h3 span { color: var(--yellow); }
.podcast .kicker { color: var(--yellow); }
.podcast p { margin-top: 12px; color: rgba(255, 255, 255, 0.8); max-width: 62ch; }
.wave { display: flex; align-items: center; gap: 5px; height: 84px; }
.wave span { width: 7px; height: 30%; border-radius: 4px; background: var(--yellow); animation: wave 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }
.wave span:nth-child(3n) { background: var(--red-bright); }
@keyframes wave { 0%, 100% { height: 22%; } 50% { height: 100%; } }
@media (max-width: 640px) { .podcast { grid-template-columns: 1fr; } }

.closing { text-align: center; }
.closing h2 { font-size: clamp(2.6rem, 6vw, 5rem); }
.closing p { margin: 20px auto 0; max-width: 62ch; }
.closing .serif { display: block; margin-top: 26px; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; color: var(--red); }

/* ================= PARTNERS ================= */
.member-card {
  position: relative;
  overflow: hidden;
  width: min(100%, 420px);
  aspect-ratio: 1.586;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 45%, var(--red-deep) 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: rotate(-4deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(253, 216, 46, 0.2); }
.member-card__top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.member-card__top img { height: 42px; width: auto; }
.member-card__chip { width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #ffe98a, var(--yellow) 60%, #d6ad10); }
.member-card__label { position: relative; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }
.member-card__name { position: relative; font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.page-hero__card { position: absolute; right: clamp(16px, 6vw, 96px); bottom: clamp(24px, 6vw, 80px); width: clamp(240px, 30vw, 400px); z-index: 1; }
.page-hero__card ~ .page-hero__inner h1 { max-width: 12ch; }
.page-hero__card ~ .page-hero__inner .lead { max-width: min(52ch, 100% - clamp(260px, 34vw, 480px)); }
@media (max-width: 1100px) {
  .page-hero__card { display: none; }
  .page-hero__card ~ .page-hero__inner .lead { max-width: 62ch; }
}

.filter-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }

.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.partner { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.partner__mono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--gray); color: var(--black); font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.02em; }
.partner:nth-child(3n + 2) .partner__mono { background: var(--yellow); }
.partner:nth-child(3n) .partner__mono { background: var(--black); color: var(--yellow); }
.partner__type { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.partner__name { font-size: 1.18rem; font-weight: 800; line-height: 1.25; }
.partner p { color: var(--ink-2); font-size: 0.97rem; }
.partner--strategic { border: 2px solid var(--black); box-shadow: var(--shadow-block); }
.partner--strategic:hover { box-shadow: 9px 9px 0 var(--black); }

.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--black); }
.area { padding: 22px 18px 0 0; }
.area__num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--red); }
.area h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.area p { font-size: 0.93rem; color: var(--ink-2); }
@media (max-width: 1000px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }
@media (max-width: 560px) { .areas { grid-template-columns: 1fr; } }

.wordmarks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 2px solid var(--black); border-radius: var(--radius); background: #fff; }
.wordmark {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 128px;
  padding: 22px;
  margin: 0 -2px -2px 0;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  text-align: center;
}
.wordmark strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1; text-transform: uppercase; }
.wordmark span { font-size: 0.85rem; color: var(--ink-3); font-weight: 600; }
@media (max-width: 720px) { .wordmarks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The last tile fills the rest of its row, so a count that does not fill the grid leaves no empty tile. */
.wordmark:last-child:nth-child(3n + 1) { grid-column: span 3; }
.wordmark:last-child:nth-child(3n + 2) { grid-column: span 2; }
@media (max-width: 720px) {
  .wordmark:last-child:nth-child(n) { grid-column: auto; }
  .wordmark:last-child:nth-child(odd) { grid-column: span 2; }
}

.perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.coupon { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 150px; border-radius: var(--radius); background: var(--yellow); color: var(--black); }
.coupon::before, .coupon::after { content: ""; position: absolute; right: 104px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); transform: translateX(50%); }
.coupon::before { top: -11px; }
.coupon::after { bottom: -11px; }
.coupon__main { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 24px; }
.coupon__main h3 { font-size: 1.2rem; }
.coupon__main p { font-size: 0.93rem; }
.coupon__stub { display: grid; place-items: center; width: 104px; padding: 16px; border-left: 2px dashed rgba(0, 0, 0, 0.35); font-family: var(--font-display); font-size: 2.1rem; line-height: 1; text-align: center; }
.coupon__stub .icon { width: 34px; height: 34px; }
.coupon--soon { grid-column: 1 / -1; max-width: 680px; background: var(--gray); }
.section--paper .coupon::before, .section--paper .coupon::after { background: var(--paper-2); }

.is-filtered-out { display: none !important; }

/* ---------- Team page ---------- */
/* The three structure cards sit right under the page's h1, so their titles are h2 here;
   they keep the look they had as h3 on the About page. */
.team-structure .structure__title {
  margin: 10px 0 8px;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
}

/* Executive Committee strip */
/* Portrait cards in a strip that scrolls sideways and snaps card by card: that part needs no
   JavaScript. Where CSS scroll-driven animations exist, --exco-p follows the strip's scroll
   (0 with the first card in the middle, 1 with the last), and each card works out how many
   cards it stands from the middle (--n): the further, the smaller, paler and more turned
   back, like cards along a rail going away. src/scripts/exco-reel.js sets --exco-p where
   those animations are missing. Without either, the cards simply stand side by side. */
@property --exco-p { syntax: "<number>"; inherits: true; initial-value: 0; }

.exco-reel {
  --card: min(290px, 68vw);
  --gap: 20px;
  --live: 0;              /* 1 once the cards follow the scroll */
  --depth: var(--live);   /* the part of it that moves: size, place and turn */
  --ground: var(--black);   /* the colour the far cards fade into */
}
@media (min-width: 901px) { .exco-reel { --card: clamp(250px, 21vw, 310px); } }
@supports (animation-timeline: scroll()) {
  .exco-reel { --live: 1; }
  .exco-reel__stage { animation: exco-p linear both; animation-timeline: scroll(self inline); }
}
.exco-reel.is-scripted { --live: 1; }
@keyframes exco-p { from { --exco-p: 0; } to { --exco-p: 1; } }

/* The ground: black, with faint ruled lines and a grain. */
.exco-reel.section--black {
  --ground: var(--black);
  background:
    repeating-linear-gradient(180deg, transparent 0 39px, rgba(255, 255, 255, 0.07) 39px 40px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4 0 0 0 -2.3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    var(--ground);
}

.exco-reel__stage {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}
.section--black .exco-reel__stage { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.exco-reel__stage:focus-visible { outline-offset: -3px; box-shadow: none; }
.exco-reel .exco-reel__list { /* two classes: above ul[role="list"] in base.css */
  display: flex;
  gap: var(--gap);
  width: max-content;
  padding: clamp(20px, 3vw, 36px) calc(50% - var(--card) / 2); /* the first and the last card can reach the middle */
}
.exco-reel__item { flex: none; width: var(--card); scroll-snap-align: center; }

.exco-card {
  --n: calc(var(--i) - var(--exco-p) * (var(--count) - 1)); /* cards from the middle: minus to the left */
  --a: max(var(--n), -1 * var(--n));                          /* the same, on either side */
  --s: calc(1 / (1 + 0.32 * var(--a)));                      /* size, as along a rail going back */
  position: relative;
  z-index: calc(50 - var(--a)); /* the nearer the middle, the higher */
  container-type: inline-size;
  padding: 6px; /* the frame */
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.18);
  transform:
    translateX(calc(var(--depth) * var(--n) * (0.85 * var(--s) * var(--card) - var(--card) - var(--gap))))
    scale(calc(1 - var(--depth) * (1 - var(--s))))
    perspective(1100px)
    rotateY(calc(var(--depth) * clamp(-3, var(--n), 3) * 8deg));
}
/* Paler with distance: the ground's own colour laid over the card. */
.exco-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ground);
  opacity: calc(var(--live) * min(0.8, 0.24 * var(--a)));
  pointer-events: none;
}
.exco-card__photo { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: #1c1c1c; }
.exco-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(calc(var(--live) * min(1, var(--a))));
}
.exco-card__initials { display: grid; place-items: center; height: 100%; font-family: var(--font-display); font-size: 30cqi; color: rgba(255, 255, 255, 0.3); }
.exco-card__foot {
  position: absolute;
  inset: auto 6px 6px;
  padding: 11px 13px 12px;
  border-radius: 0 0 2px 2px;
  background: rgba(8, 8, 8, 0.94);
  color: #fff;
}
/* The group, where a number would usually stand. */
.exco-card__group {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--red);
  font-size: max(10px, 3.3cqi);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.exco-card__name {
  font-family: var(--font-display);
  font-size: 8.2cqi;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.exco-card__role {
  margin-top: 6px;
  font-size: max(10.5px, 3.4cqi);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}

.exco-reel__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: clamp(16px, 2.5vw, 28px);
}
.exco-reel__arrows { grid-column: 2; display: flex; gap: 12px; }
.exco-reel__arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.exco-reel__arrow .icon { width: 20px; height: 20px; }
.exco-reel__arrow--prev .icon { scale: -1 1; }
.exco-reel__arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.section--black .exco-reel__arrow:hover { background: #fff; border-color: #fff; color: var(--black); }
.exco-reel__arrow[aria-disabled="true"] { opacity: 0.3; cursor: default; }
.exco-reel__arrow[aria-disabled="true"]:hover { background: transparent; border-color: currentColor; color: inherit; }
/* Reduced motion: the cards stand flat and still, and only the paler sides remain. */
@media (prefers-reduced-motion: reduce) {
  .exco-reel { --depth: 0; }
  .exco-reel__stage { scroll-behavior: auto; }
}
@media (forced-colors: active) { .exco-card::after { display: none; } }
@media print {
  .exco-reel__stage { overflow: visible; }
  .exco-reel__list { flex-wrap: wrap; width: auto; padding-inline: var(--gutter); }
  .exco-card { transform: none; }
  .exco-card::after, .exco-reel__bar { display: none; }
}

.coverage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.coverage__label { font-weight: 700; color: var(--ink-2); }
.coverage__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 8px 0 0; padding: 0; list-style: none; }
.coverage abbr, .members abbr { text-decoration: none; }

.team-list { margin-top: clamp(40px, 5vw, 64px); }
.team-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px clamp(24px, 4vw, 56px);
  padding: clamp(22px, 3vw, 36px);
  background: #fff;
  border-top: 4px solid var(--red);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 84px);
}
.team-card + .team-card { margin-top: clamp(16px, 2.4vw, 24px); }
.team-card__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.team-card__name { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 400; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; }
.team-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* The four portfolios: a small tag, a link to their page. */
.team-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1.5px solid var(--red);
  border-radius: var(--radius-pill);
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.team-card__tag:hover { background: var(--red); color: #fff; }
.team-card__meta { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.team-card__fields { display: grid; gap: 18px; align-content: start; margin: 0; }
.team-card__fields dt { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.team-card__fields dd { margin: 6px 0 0; color: var(--ink-2); }
.team-card__work { display: block; margin-top: 8px; }
.team-card__people { display: grid; gap: 24px; align-content: start; }
.team-card__subtitle { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.members { width: 100%; border-collapse: collapse; }
.members th { padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.members td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; vertical-align: middle; }
.members th:last-child, .members td:last-child { padding-right: 0; }
.members tr:last-child td { border-bottom: 0; }
.members__person { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* A person's small photo, or their initials until a photo is added.
   One cell as big as the circle, so the photo fills it and object-position keeps the face in view. */
.avatar { flex: none; display: inline-grid; grid-template: 100% / 100%; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--gray); font-family: var(--font-display); font-size: 0.95rem; color: var(--red); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

/* minmax(0, …): a long name or word never makes a card wider than the screen. */
@media (max-width: 860px) { .team-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .avatar { width: 32px; height: 32px; font-size: 0.8rem; }
  .members td { font-size: 0.9rem; }
  /* Phones: three columns do not fit, so each person takes two lines (name, then role and
     university). The column titles stay for screen readers, and the roles set in Members.astro
     keep the table a table for them. With no role column, the university lines up under the name. */
  .members thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .members, .members tbody { display: block; }
  .members tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .members tr:last-child { border-bottom: 0; }
  .members td { display: block; padding: 0; border: 0; }
  .members td:first-child { grid-column: 1 / -1; }
  .members .members__role, .members .members__university:nth-child(2) { padding-left: 42px; }
  .members .members__role { color: var(--ink-2); }
  .members .members__university { font-weight: 600; }
}