/* Tazers About page styles. See docs/design-plan.md §3.2. */

/* ============================================================
 * Hero
 * ============================================================ */
.tz-about-hero {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  color: var(--tz-cream);
  overflow: hidden;
}
.tz-about-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center;
  background-size: cover;
  opacity: 0.4;
  filter: contrast(1.1) saturate(1.05) hue-rotate(-5deg);
}
.tz-about-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(10,10,10,0.85) 75%, var(--tz-black) 100%),
    linear-gradient(180deg, rgba(229,26,26,0.18) 0%, transparent 45%);
}
.tz-about-hero__inner {
  position: relative;
  z-index: 3;
  padding: var(--space-9) 0;
  text-align: center;
}
.tz-about-hero__quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--space-3) auto var(--space-5);
  max-width: 22ch;
}
.tz-about-hero__sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tz-red);
  margin: 0;
}

/* ============================================================
 * Bio
 * ============================================================ */
.tz-about-bio {
  background: var(--tz-paper);
  color: var(--tz-black);
  padding: var(--space-9) 0;
  position: relative;
}
.tz-about-bio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.025) 0px, rgba(0,0,0,0.025) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}
.tz-about-bio__inner { position: relative; }
.tz-about-bio__head {
  text-align: center;
  margin: 0 0 var(--space-7);
}
.tz-about-bio__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 0;
}
.tz-about-bio__prose {
  max-width: 65ch;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.7;
}
.tz-about-bio__prose p { margin: 0 0 var(--space-5); }
.tz-about-bio__prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--tz-red);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tz-about-bio__prose blockquote p { margin: 0; }
.tz-about-bio__prose a { color: var(--tz-red); text-decoration: underline; text-underline-offset: 3px; }
.tz-about-bio__prose a:hover { color: var(--tz-cobalt); }
.tz-about-bio__prose em { font-style: italic; }
.tz-about-bio__prose strong { font-weight: 700; }
/* Drop cap on first paragraph */
.tz-about-bio__prose .has-drop-cap::first-letter,
.tz-about-bio__prose > p:first-child::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5em;
  line-height: 0.85;
  float: left;
  margin: 4px 12px 0 0;
  color: var(--tz-red);
}

/* ============================================================
 * Members
 * ============================================================ */
.tz-about-members {
  background: var(--tz-black);
  color: var(--tz-cream);
  padding: var(--space-9) 0;
}
.tz-about-members__head {
  text-align: center;
  margin: 0 0 var(--space-7);
}
.tz-about-members__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 0;
}
.tz-about-members__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px)  { .tz-about-members__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.tz-member {
  position: relative;
  background: var(--tz-shadow);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.tz-member:hover { transform: translateY(-4px) rotate(-0.4deg); }
.tz-member__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.tz-member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);
  filter: contrast(1.05) saturate(1.05);
}
.tz-member:hover .tz-member__photo img { transform: scale(1.05); filter: contrast(1.1) saturate(1.15); }
.tz-member__photo-placeholder {
  background: linear-gradient(135deg, var(--tz-red) 0%, var(--tz-coral) 100%);
  width: 100%; height: 100%;
}

.tz-member__body { padding: var(--space-5); }
.tz-member__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: var(--space-2) 0 var(--space-1);
}
.tz-member__role {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tz-red);
  margin: 0 0 var(--space-3);
}
.tz-member__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245,239,226,0.85);
}

/* ============================================================
 * Timeline
 * ============================================================ */
.tz-about-timeline {
  background: #0F0606;
  color: var(--tz-cream);
  padding: var(--space-9) 0;
  border-top: 1px solid rgba(229,26,26,0.15);
  border-bottom: 1px solid rgba(229,26,26,0.15);
}
.tz-about-timeline__head {
  text-align: center;
  margin: 0 0 var(--space-7);
}
.tz-about-timeline__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 0;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.tz-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}
.tz-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--tz-red) 0%, rgba(229,26,26,0.25) 100%);
}
.tz-timeline__item {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-7);
  margin: 0;
}
.tz-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background: var(--tz-red);
  border: 3px solid var(--tz-black);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(229,26,26,0.6);
}
.tz-timeline__year {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--tz-red);
  margin: 0 0 var(--space-2);
}
.tz-timeline__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

/* ============================================================
 * Press strip
 * ============================================================ */
.tz-about-press {
  background: var(--tz-cream);
  color: var(--tz-black);
  padding: var(--space-7) 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tz-about-press__head { text-align: center; margin: 0 0 var(--space-5); }
.tz-press-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-7);
}
.tz-press-strip__item { margin: 0; }
.tz-press-strip__item a {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--tz-black);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tz-press-strip__item a:hover { opacity: 1; color: var(--tz-red); }

/* ============================================================
 * Booking
 * ============================================================ */
.tz-about-booking {
  background: var(--tz-black);
  color: var(--tz-cream);
  padding: var(--space-9) 0;
}
.tz-about-booking__head { text-align: center; margin: 0 0 var(--space-7); }
.tz-about-booking__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 0;
}
.tz-about-booking__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 720px) { .tz-about-booking__cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.tz-about-booking__cols--three { max-width: 1100px; }
@media (min-width: 720px) { .tz-about-booking__cols--three { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (min-width: 980px) { .tz-about-booking__cols--three { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-7); } }

.tz-about-booking__col {
  text-align: center;
  padding: var(--space-6);
  border: 1px solid rgba(245,239,226,0.15);
  background: rgba(229,26,26,0.04);
}
.tz-about-booking__region {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tz-red);
  margin: 0 0 var(--space-3);
}
.tz-about-booking__lede {
  font-size: var(--fs-body-lg);
  margin: 0 0 var(--space-4);
}
.tz-about-booking__col .tz-btn { word-break: break-all; }
.tz-about-booking__detail {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  color: rgba(245,239,226,0.7);
}
.tz-about-booking__detail a { color: var(--tz-cream); text-decoration: underline; text-underline-offset: 2px; }
.tz-about-booking__detail a:hover { color: var(--tz-red); }