/* ==========================================================================
   CALIGOBI 2026 — about.css
   The Bluebugs team page, styled after the team portraits: a saturated
   red-orange studio backdrop, subjects lit electric blue, silver scrollwork,
   heavy white serif capitals for names and spaced serif capitals for roles.
   The colours below are sampled from the photographs themselves.
   ========================================================================== */

.page-about {
  --bb-red:       #f84023;   /* the studio backdrop */
  --bb-red-mid:   #d92c16;
  --bb-red-deep:  #b51f12;
  --bb-ember:     #7d1210;   /* where the backdrop falls into shadow */
  --bb-blue:      #333ac1;   /* the key light on the subjects */
  --bb-blue-deep: #171a73;
  --bb-night:     #0c0e45;
  --bb-silver:    #f4efe9;   /* the embossed ornament */
  --bb-coral:     #ff8e70;   /* the backdrop red, lifted to read on the blue */

  /* The portraits name people in a heavy roman capital, not the festival's
     hippie display face, so this page sets names in Cinzel's heaviest cut. */
  --font-name: "Cinzel", Georgia, "Times New Roman", serif;

  background: var(--bb-night);
  color: var(--bb-silver);
}

/* No photograph sits behind the header here, so a fading scrim would read as a
   floating bar. Give it a solid ground in the page's night blue. */
.page-about .site-header {
  background: var(--bb-night);
  border-bottom-color: rgba(244, 239, 233, 0.14);
}
.page-about .site-header::before,
.page-about .site-header::after { display: none; }
.page-about .site-header.is-stuck { background: rgba(12, 14, 69, 0.95); }

/* --------------------------------------------------------------------------
   Hero — the studio backdrop
   -------------------------------------------------------------------------- */
.team-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(4.5rem, 9vw, 7.5rem);
  text-align: center;
  color: var(--bb-silver);
  /* The glow sits high, behind the logo and title, and falls off before the
     intro paragraph. Thin cream serif only holds AA on the deeper reds, so the
     bright backdrop is kept to the large type. */
  background:
    radial-gradient(55% 45% at 50% 24%, rgba(255, 92, 58, 0.95) 0%, rgba(248, 64, 35, 0.75) 45%, rgba(248, 64, 35, 0) 100%),
    radial-gradient(120% 95% at 50% 40%, var(--bb-red-mid) 0%, var(--bb-red-deep) 62%, var(--bb-ember) 100%);
}

/* Silver scroll corners, after the filigree frame on each portrait */
.team-corner {
  position: absolute;
  width: clamp(56px, 8vw, 112px);
  height: clamp(56px, 8vw, 112px);
  background: var(--bb-silver);
  opacity: 0.85;
  pointer-events: none;
}
.team-corner--tl { top: calc(var(--header-h) + 1rem); left: 1rem; }
.team-corner--tr { top: calc(var(--header-h) + 1rem); right: 1rem; }
.team-corner--bl { bottom: 1rem; left: 1rem; }
.team-corner--br { bottom: 1rem; right: 1rem; }

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

.team-logo {
  display: block;
  width: clamp(84px, 10vw, 124px);
  height: clamp(84px, 10vw, 124px);
  margin: 0 auto;
  background: #fff;
  -webkit-mask: url("../assets/img/logo-bluebugs-alpha.png") center / contain no-repeat;
  mask: url("../assets/img/logo-bluebugs-alpha.png") center / contain no-repeat;
  filter: drop-shadow(0 6px 18px rgba(60, 6, 4, 0.35));
}

.team-title {
  margin: clamp(1.25rem, 2.6vw, 2rem) 0 0.9rem;
  font-family: var(--font-name);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.2vw, 5rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  /* The names on the portraits are embossed: a lit top edge over a hard
     shadow. Two text-shadows get close without resorting to an image. */
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.5),
    0 3px 0 rgba(90, 10, 8, 0.5),
    0 12px 32px rgba(60, 6, 4, 0.35);
}

.team-sub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}

.team-rule {
  display: block;
  width: 144px;
  height: 36px;
  margin: 1.5rem auto;
  background: var(--bb-silver);
  opacity: 0.75;
}

.team-intro {
  max-width: 44ch;
  margin: 0 auto;
  font-size: clamp(1.12rem, 1.6vw, 1.32rem);
  line-height: 1.7;
  color: #fff;
  text-shadow: 0 1px 12px rgba(60, 6, 4, 0.35);
}

/* --------------------------------------------------------------------------
   The team — set on the blue of the key light, so the red portraits glow
   -------------------------------------------------------------------------- */
.team {
  position: relative;
  padding-block: var(--section-y);
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(51, 58, 193, 0.55) 0%, rgba(51, 58, 193, 0) 100%),
    linear-gradient(180deg, var(--bb-blue-deep) 0%, var(--bb-night) 100%);
}

.member {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5.5vw, 5rem);
  align-items: center;
}
.member + .member { margin-top: clamp(4.5rem, 10vw, 8rem); }

/* Alternate sides so four portraits read as a procession, not a column */
.member:nth-child(even) .member-photo { order: 2; }

.member-photo { margin: 0; }
.member-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(244, 239, 233, 0.16),
    0 36px 90px -34px rgba(248, 64, 35, 0.6),
    0 20px 44px -22px rgba(0, 0, 0, 0.65);
}

.member-name {
  margin: 0 0 1rem;
  font-family: var(--font-name);
  font-weight: 800;
  font-size: clamp(2.8rem, 6.4vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 rgba(6, 8, 44, 0.6);
}

.member-meet {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1;
  letter-spacing: 0.32em;
  text-shadow: none;
  color: var(--bb-coral);
}

.member-role {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.88rem, 1.15vw, 1rem);
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-silver);
}
.member-role + .member-role { margin-top: 0.2rem; color: var(--bb-coral); }

.member-rule {
  display: block;
  width: 120px;
  height: 30px;
  margin: 1.35rem 0 1.4rem;
  background: var(--bb-silver);
  opacity: 0.5;
}

.member-bio p {
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.72;
  color: rgba(244, 239, 233, 0.9);
}

@media (max-width: 860px) {
  .member {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .member:nth-child(even) .member-photo { order: 0; }
  .member-photo {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
  .member-body { text-align: center; }
  .member-rule { margin-inline: auto; }
  .member-bio p { text-align: left; }
}

@media (max-width: 520px) {
  .team-corner { opacity: 0.6; }
}