/* Team page — light square portraits, profile modal, vine title, background clip art (2026-09-30, design 06-light-a) */
body[data-page="team"] { background: #080909; }

.team-page,
.team-profile {
  --team-ink: #171511;
  --team-cream: #F0E1CF;
  --team-paper: #faf6ee;
  --team-gold: #D2AA70;
  --team-gold-b: #DDB978;
  --team-gold-muted: #a67b3f;
  --team-gold-role: #8a6a3c;
  --team-art: #B8904F;
  --team-wash: linear-gradient(90deg, #C99C5E 0%, #DDB978 22%, #EED6A6 50%, #DDB978 78%, #C99C5E 100%);
}
.team-page *, .team-profile * { box-sizing: border-box; }

/* —— Light band —— */
.team-light {
  position: relative;
  overflow: hidden;
  padding: 52px 64px 72px;
  background: var(--team-paper);
  color: var(--team-ink);
}
.team-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("MEDIA/IMAGES/TEXTURES/APPROVED/panel-paper-gold-on-white.webp") center / cover no-repeat;
  opacity: .35;
  pointer-events: none;
}

/* —— Background clip art (decorative) —— */
.team-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--team-art); opacity: .10; }
.team-art__item { position: absolute; display: block; }
.team-art__item img { display: block; width: 100%; height: auto; max-width: none; }
.team-art__svg { display: block; width: 100%; height: 100%; overflow: visible; stroke-width: 2.9; }
.team-art__item--rack { left: -95px; top: 34px; width: 520px; transform: rotate(-7deg); }
.team-art__item--headphones { right: -60px; top: -6px; width: 440px; transform: rotate(9deg); }
.team-art__item--wave { left: 560px; bottom: -30px; width: 420px; height: 80px; opacity: .8; }
.team-art__item--faders { right: -60px; bottom: -80px; width: 330px; height: 330px; transform: rotate(8deg); }
.team-art__item--piano { left: -205px; bottom: -28px; width: 440px; }

.team-light__inner { position: relative; z-index: 1; }

/* —— Title —— */
.team-head { text-align: center; }
.team-head__label {
  margin: 0;
  font: 600 .72rem/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--team-gold-muted);
}
.team-head__title { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 10px; }
.team-head__title h1 {
  margin: 0;
  font: 400 3.5rem/1 "Bebas Neue", Impact, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--team-ink);
}
.team-head__dot { color: #E6CBA1; }
.team-vine { display: block; flex: none; overflow: visible; color: var(--team-gold-muted); }
.team-vine--right { transform: scaleX(-1); }

/* —— Grid + cards —— */
.team-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 340px);
  justify-content: center;
  gap: 52px;
}
.team-grid__item { margin: 0; }
.team-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform .25s ease;
}
.team-card:focus-visible { outline: 2px solid var(--team-gold); outline-offset: 6px; }
.team-card__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(166, 123, 63, .55);
  transition: box-shadow .25s ease;
}
.team-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform .5s ease;
}
.team-card__name {
  display: block;
  margin-top: 18px;
  font: 400 1.9rem/1 "Bebas Neue", Impact, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--team-ink);
}
.team-card__name::after { content: ""; display: block; width: 48px; height: 1px; margin: 12px auto 0; background: var(--team-gold); }
.team-card__role {
  display: block;
  margin-top: 8px;
  font: 600 .72rem/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--team-gold-role);
}
.team-card__more {
  display: inline-block;
  margin-top: 12px;
  font: 600 .66rem "Barlow Condensed", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--team-gold-muted);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}
.team-card:hover, .team-card:focus-visible { transform: translateY(-6px); }
.team-card:hover .team-card__frame, .team-card:focus-visible .team-card__frame {
  box-shadow: 0 0 0 1px var(--team-gold-b), 0 0 0 6px var(--team-paper), 0 0 0 7px rgba(210, 170, 112, .8), 0 18px 30px -18px rgba(60, 40, 15, .45);
}
.team-card:hover .team-card__frame img { transform: scale(1.03); }
.team-card:hover .team-card__more, .team-card:focus-visible .team-card__more { opacity: 1; transform: none; }

/* —— Booking button (champagne wash) —— */
.team-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 17px 30px;
  border: 1px solid #e7c98f;
  border-radius: 4px;
  background: var(--team-wash);
  color: var(--team-ink);
  text-decoration: none;
  font: 700 .9rem "Barlow Condensed", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: inset 0 1px rgba(255, 255, 255, .45);
  transition: transform .2s ease, filter .2s ease;
}
.team-book:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* —— CTA band (felt) —— */
.team-cta {
  padding: 60px 20px;
  text-align: center;
  background: #11110F url("MEDIA/IMAGES/TEXTURES/APPROVED/panel-industrial-felt-neutral.webp") repeat;
  background-size: 360px auto;
  background-blend-mode: multiply;
  color: var(--team-cream);
}
.team-cta p { margin: 0 0 22px; font: italic 300 1.5rem "Newsreader", Georgia, serif; color: var(--team-cream); }

/* —— Profile modal —— */
.team-profile { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.team-profile[hidden] { display: none; }
.team-profile__scrim { position: absolute; inset: 0; background: rgba(23, 21, 17, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.team-profile__panel {
  position: relative;
  display: grid;
  grid-template-columns: 460px 440px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fbf8f2;
  border: 1px solid rgba(166, 123, 63, .45);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
  color: var(--team-ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.team-profile__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--team-wash); z-index: 1; }
.team-profile.is-open .team-profile__scrim, .team-profile.is-open .team-profile__panel { opacity: 1; transform: none; }
.team-profile__media img { display: block; width: 460px; height: 460px; max-width: none; object-fit: cover; object-position: 50% 22%; }
.team-profile__body { padding: 56px 48px 40px; }
.team-profile__close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: #5a5046; cursor: pointer;
  font: 300 2rem/1 "DM Sans", sans-serif;
}
.team-profile__close:hover, .team-profile__close:focus-visible { background: rgba(210, 170, 112, .18); color: var(--team-ink); }
.team-profile__role { margin: 0; font: 600 .74rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--team-gold-role); }
.team-profile__name { margin: 10px 0 0; font: 400 2.6rem/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--team-ink); }
.team-profile__rule { display: block; width: 64px; height: 1px; margin: 20px 0; background: var(--team-gold); }
.team-profile__bio { margin: 0 0 28px; font: 400 1.12rem/1.65 "Newsreader", Georgia, serif; color: #3d362e; }
.team-profile__hint { margin: 18px 0 0; font: 500 .72rem "DM Sans", sans-serif; color: #8b8177; }

/* —— Responsive —— */
@media (max-width: 1180px) {
  .team-light { padding: 48px 32px 64px; }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 300px)); gap: 32px; }
  .team-profile__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(900px, 100%); }
  .team-profile__media img { width: 100%; height: 100%; aspect-ratio: 1 / 1; }
}
@media (max-width: 820px) {
  .team-light { padding: 40px 22px 56px; }
  .team-grid { grid-template-columns: minmax(0, 340px); gap: 40px; margin-top: 32px; }
  .team-card__more { opacity: 1; transform: none; }
  .team-art__item--rack { left: -120px; top: 10px; width: 300px; }
  .team-art__item--headphones { right: -90px; top: 40px; width: 240px; }
  .team-art__item--wave, .team-art__item--faders, .team-art__item--piano { display: none; }
  .team-profile { padding: 0; align-items: stretch; }
  .team-profile__panel { grid-template-columns: 1fr; width: 100%; max-height: 100vh; height: 100%; border: 0; }
  .team-profile__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .team-profile__body { padding: 28px 24px 36px; }
  .team-profile__close { top: 12px; right: 12px; background: rgba(251, 248, 242, .92); }
}
@media (max-width: 480px) {
  .team-head__title { gap: 12px; }
  .team-head__title h1 { font-size: 2.9rem; }
  .team-vine { width: 64px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-card, .team-card__frame, .team-card__frame img, .team-card__more, .team-profile__scrim, .team-profile__panel, .team-book { transition: none; }
}