/* Photo slots and the simplified sections. Loaded after styles.css. */
.shot { position: relative; margin: 0; overflow: hidden; border-radius: 1.5rem; background: var(--selected); }
.shot[hidden] { display: none; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .625rem; border-radius: var(--radius-full); background: rgb(var(--irip-indigo) / .72); color: var(--on-brand); font: 500 .6875rem/1.4 var(--font-ui); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.shot--wide { aspect-ratio: 3 / 2; margin-bottom: 1rem; }
.bento .shot { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.teach__card .shot { aspect-ratio: 3 / 2; border-radius: var(--radius-xl); margin-bottom: 1.25rem; }

.tracks { display: grid; gap: .875rem; }
.track { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.track .shot { border-radius: 0; aspect-ratio: 3 / 2; }
.track__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.track h3 { font-size: 1.25rem; line-height: 1.35; letter-spacing: -.01em; margin-bottom: .5rem; }
.track__body > p:last-child { font: 400 .9375rem/1.65 var(--font-ui); color: var(--muted); }

.mod__body .handin { margin-top: 0; align-self: start; }
.credits { margin-top: .5rem; font: 400 .75rem/1.6 var(--font-ui); color: var(--inverse-muted); opacity: .8; }
.credits[hidden] { display: none; }
.credits a { color: inherit; }

@media (min-width: 800px) {
  .shot--wide { aspect-ratio: 16 / 6; margin-bottom: 1.25rem; }
  .bento .shot { aspect-ratio: 16 / 5; }
  .tracks { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .track__body { padding: 1.5rem; }
}
@media (min-width: 960px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
@media (hover: hover) {
  .js .track.in { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), opacity .8s var(--ease-out); }
  .js .track.in:hover { transform: translateY(-6px); box-shadow: var(--shadow-elevated); }
}

/* Team: people cards and the faculty invite (replaces the .tcard placeholders in styles.css). */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.person { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.person__ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--selected); }
.person__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .9s var(--ease-out); }
.person__body { display: grid; gap: .125rem; padding: .875rem .875rem 1rem; }
.person h3 { font: 600 1rem/1.35 var(--font-ui); letter-spacing: -.01em; text-wrap: balance; }
.person__role { font: 500 .8125rem/1.45 var(--font-ui); color: var(--link); }
.join { position: relative; overflow: hidden; grid-column: 1 / -1; display: grid; gap: 1rem; align-content: start; padding: 1.5rem 1.25rem; border-radius: 1.25rem; background: rgb(var(--irip-indigo)); color: var(--on-brand); }
.join__bg { position: absolute; inset: 0; pointer-events: none; opacity: .6; }
.join__bg .orb--a { width: 26rem; height: 26rem; left: auto; right: -12rem; top: -14rem; }
.join__ic, .join__txt, .join .btn { position: relative; }
.join__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-xl); background: rgb(var(--irip-ivory) / .1); color: var(--lav); }
.join__ic svg { width: 1.5rem; height: 1.5rem; }
.join h3 { font-size: 1.25rem; line-height: 1.35; margin-bottom: .375rem; }
.join p { font: 400 .875rem/1.65 var(--font-ui); color: var(--inverse-muted); max-width: 22rem; }
.join .btn { justify-self: start; }
@media (min-width: 800px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .person { border-radius: 1.5rem; }
  .person__body { padding: 1.25rem 1.5rem 1.5rem; gap: .25rem; }
  .person h3 { font-size: 1.25rem; line-height: 1.3; }
  .person__role { font-size: .875rem; }
  .join { grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 2rem; border-radius: 1.5rem; }
  .join__txt { margin-top: auto; padding-top: 2rem; }
  .join .btn { margin-top: 1.5rem; }
  .join h3 { font-size: 1.5rem; }
}
@media (hover: hover) {
  .js .person.in { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), opacity .8s var(--ease-out); }
  .js .person.in:hover { transform: translateY(-6px); box-shadow: var(--shadow-elevated); }
  .person:hover .person__ph img { transform: scale(1.04); }
}