/* =========================================================
   Our Team
   ========================================================= */

/* ---------- white panel with thin frame ---------- */
.team-panel { background: var(--red) url("../assets/images/leather.jpg") center / 89.5rem auto; }
.team-panel__frame {
  position: relative; background: var(--white); border-radius: 1.125rem 1.125rem 0 0; padding: 6.875rem max(5rem, calc((100% - 90rem) / 2)) 7.5rem; text-align: center;
}
.team-panel__frame::before { content: ""; position: absolute; inset: 2.5rem 2.5rem 2.5rem; border: 1px solid #c9b2ac; border-top-color: #e7dcd9; pointer-events: none; }
.team-panel__intro { margin: 1.75rem auto 0; max-width: 38.75rem; color: #8a4b42; font-size: 1.125rem; line-height: 1.6; }

.team-grid { list-style: none; margin: 5.25rem auto 0; padding: 0; max-width: 73.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.75rem 4rem; }
.member__open { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; }

/* oval portrait with an offset hairline ring */
.member__oval { position: relative; width: 20.625rem; max-width: 92%; aspect-ratio: 330 / 384; display: block; }
.member__oval::before { content: ""; position: absolute; inset: -0.5625rem; border-radius: 50%; border: 1px solid #8b5a52; transition: transform .6s var(--ease); }
.member__portrait {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 35%, #e9d8bf 0%, #cfb08e 55%, #a77c5f 100%);
  font-family: var(--f-serif); font-style: italic; font-size: 4rem; letter-spacing: .04em; color: rgba(74, 21, 14, .72);
  box-shadow: inset 0 0 2.5rem rgba(74,21,14,.18);
  transition: transform .6s var(--ease), filter .6s;
}
.member__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.member__portrait img { opacity: 0; transition: opacity .35s ease; }
.member__portrait img.is-loaded { opacity: 1; }
.member__portrait.has-photo { color: transparent; }
.member__open:hover .member__portrait, .member__open:focus-visible .member__portrait { transform: scale(1.03); }
.member__portrait img { transition: opacity .35s ease, transform .8s var(--ease), filter .6s; }
.member__open:hover .member__portrait img, .member__open:focus-visible .member__portrait img { transform: scale(1.06); filter: sepia(.35) saturate(.9); }
.member__veil {
  position: absolute; inset: 0; z-index: 2; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.625rem; padding-bottom: 22%;
  background: linear-gradient(180deg, rgba(74,21,14,0) 30%, rgba(74,21,14,.55) 62%, rgba(46,12,7,.88) 100%);
  color: #fff8ec; opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease); transform: scale(1.03);
}
.member__veil::before { content: ""; position: absolute; inset: 0.5rem; border-radius: 50%; border: 1px solid rgba(232,196,140,.55); transform: scale(.96); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.member__veil-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(232,196,140,.8); background: rgba(255,248,236,.08); color: #f3d3a8; transform: translateY(0.75rem); transition: transform .55s var(--ease); }
.member__veil-ic svg { width: 1.25rem; height: 1.25rem; }
.member__veil-t { font-family: var(--f-nav); font-size: 0.9375rem; letter-spacing: .18em; text-transform: uppercase; transform: translateY(0.75rem); opacity: 0; transition: transform .55s .05s var(--ease), opacity .45s .05s; }
.member__open:hover .member__veil, .member__open:focus-visible .member__veil { opacity: 1; }
.member__open:hover .member__veil::before, .member__open:focus-visible .member__veil::before { opacity: 1; transform: none; }
.member__open:hover .member__veil-ic, .member__open:focus-visible .member__veil-ic, .member__open:hover .member__veil-t, .member__open:focus-visible .member__veil-t { transform: none; opacity: 1; }
@media (hover: none) { .member__veil { opacity: 0 !important; } }
.member__open:hover .member__oval::before { transform: scale(1.03) rotate(-2deg); }

.member__card {
  margin-top: 1.625rem; width: 100%; padding: 1.5rem 1.5rem 1.25rem; display: block;
  background: var(--cream); border: 1px solid #ebe5da; box-shadow: 0 0.3125rem 0 -0.0625rem #f1e9dc, 0 0.3125rem 0 0 #e3d8c6, 0 0.625rem 0 -0.25rem #ebe1d1, 0 0.625rem 0 -0.1875rem #d9cbb4;
  transition: box-shadow .5s var(--ease), transform .4s var(--ease);
}
.member__open:hover .member__card, .member__open:focus-visible .member__card { transform: translateY(-0.25rem); box-shadow: 0 1rem 0 -0.375rem #f1e9dc, 0 1rem 0 -0.3125rem #d9cbb4, 0 1.875rem 0 -0.75rem #ebe1d1, 0 1.875rem 0 -0.6875rem #cdbb9f, 0 1.75rem 2.25rem -0.75rem rgba(74,21,14,.18); }
.member.peek .member__card { animation: sheets 1.5s var(--ease); }
@keyframes sheets { 0%, 100% { box-shadow: 0 0.3125rem 0 -0.0625rem #f1e9dc, 0 0.3125rem 0 0 #e3d8c6, 0 0.625rem 0 -0.25rem #ebe1d1, 0 0.625rem 0 -0.1875rem #d9cbb4; } 40% { box-shadow: 0 1rem 0 -0.375rem #f1e9dc, 0 1rem 0 -0.3125rem #d9cbb4, 0 1.875rem 0 -0.75rem #ebe1d1, 0 1.875rem 0 -0.6875rem #cdbb9f; } }
.member__name { display: block; font-family: var(--f-serif); font-size: 1.5rem; line-height: 1.25; color: #1e1e1e; }
.member__role { display: block; margin-top: 0.375rem; min-height: 2.6em; font-size: 0.9062rem; font-weight: 600; color: var(--red); line-height: 1.4; }
.member__cue {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid #e3d8c6;
  font-family: var(--f-nav); font-size: 0.8125rem; letter-spacing: .14em; text-transform: uppercase; color: #8f5c1c;
}
.member__cue svg { width: 1.125rem; height: 0.625rem; transition: transform .4s var(--ease); }
.member__open:hover .member__cue svg, .member__open:focus-visible .member__cue svg { transform: translateX(0.375rem); }
.member__open:hover .member__cue, .member__open:focus-visible .member__cue { color: var(--red-brand); }

.team-lists { margin: 7.5rem auto 0; max-width: 73.75rem; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; text-align: left; align-items: start; }
.team-list { position: relative; padding: 2.75rem 2.75rem 3rem; background: #faf6ef; border: 1px solid #ece2d2; border-radius: 0.75rem; }
.team-list::before { content: ""; position: absolute; left: 2.75rem; top: -1px; width: 4rem; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; }
.team-list__head { padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid #e6dac7; }
.team-list__kicker { font-family: var(--f-nav); font-size: 0.8125rem; letter-spacing: .2em; text-transform: uppercase; color: #8f5c1c; }
.team-list h3 { margin-top: 0.5rem; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: clamp(1.625rem, 2.1vw, 2rem); line-height: 1.2; color: var(--red-brand); }
.team-list__key { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; font-size: 0.8125rem; color: #7a6a62; }
.team-list__key i { font-style: normal; display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #efe3cf; color: var(--red-brand); font-size: 0.6875rem; font-weight: 700; }
.team-list__key i:nth-of-type(2) { margin-left: 0.75rem; }

.labs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.labs li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.875rem 0.75rem 1rem;
  background: #fff; border: 1px solid #eee4d4; border-radius: 0.5rem; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s;
}
.labs li:hover { border-color: #dcc7a4; transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(74,21,14,.07); }
.lab__name { font-family: var(--f-serif); font-size: 1.0625rem; color: #2b211d; line-height: 1.25; }
.lab__terms { display: flex; gap: 0.25rem; flex-shrink: 0; }
.lab__terms i { font-style: normal; padding: 0.125rem 0.4375rem; border-radius: 1rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; background: #f3eadb; color: #7a5420; }

.staff { list-style: none; margin: 0; padding: 0; }
.staff li { position: relative; display: grid; gap: 0.25rem; padding: 0.875rem 0 0.875rem 1.5rem; border-bottom: 1px dashed #e3d6c1; }
.staff li:first-child { padding-top: 0; }
.staff li:first-child::before { top: 0.5rem; }
.staff li:last-child { border-bottom: 0; padding-bottom: 0; }
.staff li::before { content: ""; position: absolute; left: 0.125rem; top: 1.375rem; width: 0.4375rem; height: 0.4375rem; transform: rotate(45deg); border: 1px solid var(--gold); background: #faf6ef; transition: background-color .25s; }
.staff li:hover::before { background: var(--gold); }
.staff__name { font-family: var(--f-serif); font-size: 1.1875rem; color: #2b211d; line-height: 1.3; }
.staff__role { font-size: 0.875rem; line-height: 1.5; color: #7a6a62; }

.sponsors { position: relative; background: var(--white); padding: 6rem var(--pad-x) 7rem; border-top: 0.1875rem solid var(--red); text-align: center; }
.sponsors__kicker { font-family: var(--f-nav); font-size: 0.875rem; letter-spacing: .22em; text-transform: uppercase; color: #8f5c1c; }
.sponsors__title { margin-top: 0.625rem; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: clamp(2.125rem, 3.2vw, 2.875rem); letter-spacing: .03em; color: #1e1e1e; }
.sponsor-grid { list-style: none; margin: 3.75rem auto 0; padding: 0; max-width: 76rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.sponsor {
  position: relative; min-height: 10.5rem; padding: 2.5rem 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(180deg, #fbf8f2, #f5eee2); border: 1px solid #ebe1d0; border-radius: 0.625rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.sponsor::after { content: ""; position: absolute; inset: 0.5rem; border: 1px solid rgba(220,161,93,.28); border-radius: 0.375rem; pointer-events: none; transition: border-color .3s; }
.sponsor:hover { transform: translateY(-4px); border-color: #e0cba8; box-shadow: 0 1.25rem 2rem -1rem rgba(74,21,14,.22); }
.sponsor:hover::after { border-color: rgba(220,161,93,.6); }
.sponsor__orn { position: absolute; top: 0; left: 50%; width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; transform: rotate(45deg); background: var(--white); border: 1px solid var(--gold); transition: background-color .3s; }
.sponsor:hover .sponsor__orn { background: var(--gold); }
.sponsor__name { font-family: var(--f-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--red-brand); }
.sponsor__sub { font-family: var(--f-serif); font-style: italic; font-size: 1rem; color: #7a6a62; }

.team-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.875rem 1.25rem; }
.team-modal[hidden] { display: none; }
.team-modal__backdrop { position: absolute; inset: 0; background: rgba(40, 14, 9, .8); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.team-modal.is-open .team-modal__backdrop { opacity: 1; }
.team-modal__dialog {
  position: relative; width: min(64rem, 100%); max-height: calc(100vh - 3.75rem); display: grid; grid-template-columns: 21.5rem minmax(0, 1fr);
  background: #f7f1e6; border-radius: 0.875rem; overflow: hidden; outline: none;
  box-shadow: 0 2.5rem 5rem rgba(20, 4, 2, .5), 0 0 0 1px rgba(220,161,93,.35);
  opacity: 0; transform: translateY(1.5rem) scale(.97); transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.team-modal.is-open .team-modal__dialog { opacity: 1; transform: none; }
.team-modal__close {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(119,46,37,.4); background: rgba(247,241,230,.9); color: var(--red-brand); transition: background-color .2s, color .2s, transform .3s var(--ease);
}
.team-modal__close:hover { background: var(--red-brand); color: var(--cream); transform: rotate(90deg); }

.team-modal__side {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3.5rem 2.25rem;
  color: #f5ead8; background: linear-gradient(180deg, rgba(74,26,18,.55), rgba(40,12,8,.75)), #5a2219 url("../assets/images/leather.jpg") center / 60rem auto;
}
.team-modal__side::after { content: ""; position: absolute; inset: 0.875rem; border: 1px solid rgba(220,161,93,.35); pointer-events: none; }
.team-modal__oval { position: relative; width: 14.5rem; max-width: 80%; aspect-ratio: 335 / 400; }
.team-modal__oval::before { content: ""; position: absolute; inset: -0.625rem; border-radius: 50%; border: 1px solid rgba(220,161,93,.75); }
.team-modal__portrait {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 35%, #e9d8bf 0%, #cfb08e 55%, #a77c5f 100%);
  font-family: var(--f-serif); font-style: italic; font-size: 3.75rem; color: rgba(74, 21, 14, .72);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.35);
}
.team-modal__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.team-modal__name { margin-top: 2.25rem; font-family: var(--f-serif); font-weight: 500; font-size: 1.875rem; line-height: 1.2; color: #fff8ec; }
.team-modal__role { margin-top: 0.75rem; max-width: 16rem; font-family: var(--f-nav); font-size: 0.8125rem; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; color: #e4bd86; }

.team-modal__main { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3.5rem 3.5rem 0; }
.team-modal__kicker { display: flex; align-items: center; gap: 0.875rem; font-family: var(--f-nav); font-size: 0.8125rem; letter-spacing: .22em; text-transform: uppercase; color: #8f5c1c; }
.team-modal__kicker::after { content: ""; flex: 0 0 3rem; height: 1px; background: #dca15d; }
.team-modal__bio { margin-top: 1.5rem; }
.team-modal__bio p { font-family: var(--f-serif); font-size: 1.1875rem; line-height: 1.8; color: #2b211d; }
.team-modal__bio p + p { margin-top: 1rem; }
.team-modal__bio p:first-child::first-letter { float: left; margin: 0.375rem 0.625rem 0 0; font-size: 3.75rem; line-height: 0.85; color: var(--red-brand); }
.team-modal__bio a { color: var(--teal); }
.team-modal__nav {
  position: sticky; bottom: 0; margin-top: auto; padding: 1.25rem 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: linear-gradient(180deg, rgba(247,241,230,0), #f7f1e6 30%); border-top: 1px solid #e6d9c3;
}
.team-modal__bio { margin-bottom: 2.5rem; }
.team-modal__nav button {
  display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem; border: 1px solid transparent; border-radius: 2rem; background: none;
  font-family: var(--f-nav); font-size: 0.8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-brand); transition: background-color .2s, border-color .2s;
}
.team-modal__nav button:hover { background: #efe3cf; border-color: #e0cdb0; }
.team-modal__nav svg { width: 1.125rem; height: 0.625rem; }
.team-modal__count { font-family: var(--f-serif); font-style: italic; font-size: 1rem; color: #8a7a70; }
.team-modal.is-swap .team-modal__side > *, .team-modal.is-swap .team-modal__main > :not(.team-modal__nav) { opacity: 0; transform: translateY(0.5rem); }
.team-modal__side > *, .team-modal__main > * { transition: opacity .25s, transform .35s var(--ease); }
html.modal-open { overflow: hidden; }

@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-lists { grid-template-columns: 1fr; } .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .team-panel__frame { padding: 4.375rem 1.375rem 5rem; border-radius: 0.75rem 0.75rem 0 0; }
  .team-panel__frame::before { inset: 0.875rem; }
  .team-grid { grid-template-columns: 1fr; gap: 3.5rem; max-width: 22.5rem; }
  .member__oval { width: 15.625rem; }
  .team-lists { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 4.375rem; }
  .team-list { padding: 2rem 1.25rem 2.25rem; }
  .team-list::before { left: 1.25rem; }
  .labs { grid-template-columns: 1fr; }
  .sponsors { padding: 4rem 1.375rem 5rem; }
  .sponsor-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .sponsor { min-height: 8rem; }
  .team-modal { padding: 0.75rem; }
  .team-modal__dialog { grid-template-columns: 1fr; overflow-y: auto; max-height: calc(100vh - 1.5rem); }
  .team-modal__side { padding: 2.75rem 1.5rem 2rem; }
  .team-modal__oval { width: 9.5rem; }
  .team-modal__name { margin-top: 1.5rem; font-size: 1.625rem; }
  .team-modal__main { overflow: visible; padding: 2rem 1.375rem 0; }
  .team-modal__bio p { font-size: 1.0625rem; }
  .team-modal__nav button span { display: none; }
}

.team-modal__close svg { width: 1rem; height: 1rem; }