/* MAIN EVENTS — ISOLATED CLEAN REDESIGN */
.me-page {
  min-height: 100vh;
  background: #4d2a41;
  color: #fff;
}
.me-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,226,232,.62), transparent 28%),
    radial-gradient(circle at 18% 24%, rgba(255,171,199,.15), transparent 30%),
    linear-gradient(180deg, #d88aa4 0%, #a45b79 27%, #6b3b58 56%, #382033 82%, #24141f 100%);
}
.me-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.me-navbar {
  min-height: 78px;
  padding: 0 4vw;
  background: rgba(61,31,48,.92);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.me-navbar.navbar-scrolled {
  padding: 0 4vw;
  background: rgba(45,24,36,.96);
}
.me-navbar .nav-logo { height: 46px; }
.me-navbar .nav-links { gap: 2.5rem; }
.me-navbar .nav-links a { font-size: .72rem; letter-spacing: .14em; }

.me-main {
  position: relative;
  min-height: 100vh;
  padding: 7.4rem 1.25rem 5rem;
  overflow: hidden;
}
.me-shape {
  position: absolute;
  pointer-events: none;
  opacity: .22;
}
.me-shape-left {
  left: -7rem;
  top: 5rem;
  width: 31rem;
  height: 34rem;
  background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(91,39,62,.04));
  clip-path: polygon(0 0, 86% 17%, 58% 48%, 88% 73%, 33% 100%, 0 82%);
}
.me-shape-right {
  right: -7rem;
  top: 4rem;
  width: 29rem;
  height: 34rem;
  background: linear-gradient(210deg, rgba(255,255,255,.15), rgba(91,39,62,.03));
  clip-path: polygon(26% 0, 100% 0, 100% 76%, 42% 100%, 0 63%, 19% 30%);
}
.me-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 65%, rgba(255,225,233,.08), transparent 20%),
    radial-gradient(circle at 88% 48%, rgba(255,225,233,.06), transparent 22%);
}

.me-hero {
  position: relative;
  z-index: 2;
  width: min(880px, 100%);
  margin: 0 auto;
  text-align: center;
}
.me-kicker {
  margin: 0 0 .65rem;
  color: #64384f;
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .48em;
  text-transform: uppercase;
}
.me-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 6.5rem);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-shadow: 0 12px 30px rgba(73,29,50,.16);
}
.me-title-swipe {
  width: min(600px, 70%);
  height: .8rem;
  margin: -.28rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0 4%, #ff4d91 16%, #ff6da8 82%, transparent 96%);
  transform: rotate(-1deg) skewX(-20deg);
  opacity: .92;
}
.me-subtitle {
  margin: 1.35rem auto 0;
  color: #f4c8d4;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.me-tabs-wrap {
  position: sticky;
  top: 88px;
  z-index: 40;
  width: min(850px, calc(100% - 1rem));
  margin: 2rem auto 1.75rem;
}
.me-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;
  padding: .65rem;
  border-radius: 18px;
  background: rgba(84,47,65,.76);
  border: 1px solid rgba(255,206,220,.24);
  box-shadow: 0 18px 34px rgba(50,20,37,.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.me-tab {
  min-width: 0;
  min-height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: rgba(255,237,243,.82);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.me-tab.active {
  background: linear-gradient(180deg, #ff9ab9, #ff86ad);
  color: #4a2437;
  box-shadow: 0 8px 20px rgba(255,132,174,.18);
}

.me-timeline {
  position: relative;
  z-index: 2;
  width: min(850px, 100%);
  margin: 0 auto;
  padding-left: 46px;
  box-sizing: border-box;
}
.me-line {
  position: absolute;
  left: 17px;
  top: 2rem;
  bottom: 2rem;
  width: 2px;
  border-radius: 99px;
  background: rgba(255,204,219,.46);
  overflow: hidden;
}
.me-line-fill {
  position: absolute;
  inset: 0;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, #ffeaf0, #ff79ab);
  box-shadow: 0 0 14px rgba(255,120,173,.48);
}
.me-item {
  position: relative;
  margin-bottom: 1rem;
  scroll-margin-top: 170px;
}
.me-node {
  position: absolute;
  left: -38px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #ff78a7;
  border: 3px solid #ffe8ef;
  box-shadow: 0 0 0 4px rgba(255,120,167,.15);
  z-index: 3;
  transition: transform .25s ease, box-shadow .25s ease;
}
.me-node.active {
  transform: translateY(-50%) scale(1.14);
  box-shadow: 0 0 0 6px rgba(255,120,167,.14), 0 0 18px rgba(255,120,167,.42);
}
.me-card {
  
  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    330px;

  gap: 1.8rem;

  align-items: stretch;

  padding: 1.25rem 1.25rem 1.25rem 1.55rem;
  box-sizing: border-box;

  border-radius: 18px;
  border: 1px solid rgba(255,215,226,.2);

  background:
    linear-gradient(
      180deg,
      rgba(85,46,65,.54),
      rgba(68,35,53,.56)
    );

  box-shadow: 0 18px 42px rgba(48,19,35,.16);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  overflow: hidden;

  transition:
    transform .35s var(--expo-out),
    border-color .35s ease,
    background .35s ease;
}

.me-copy { min-width: 0; }
.me-date {
  margin: 0 0 .65rem;
  color: #ffc1d5;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.me-name {
  margin: 0 0 .7rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.7vw, 2.25rem);
  line-height: .98;
  text-transform: uppercase;
}
.me-desc {
  margin: 0;
  max-width: 470px;
  color: rgba(255,239,244,.9);
  font-size: .92rem;
  line-height: 1.45;
}
.me-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding: .78rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9ab9, #ff84ac);
  color: #482336;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(255,130,172,.14);
}
.me-btn span { font-size: .95rem; }
.me-photo {
  position: relative;

  min-width: 0;

  width: 100%;
  height: auto;
  min-height: 100%;

  align-self: stretch;

  border-radius: 14px;
  overflow: hidden;

  background-position: center;
  background-size: cover;

  border: 1px solid rgba(255,222,232,.14);

  box-shadow:
    0 14px 26px rgba(35,13,27,.18);
}
.me-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45,18,32,.04), rgba(45,18,32,.16));
}
.me-star {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 12px;
  color: #ffb7cb;
  font-size: 1.8rem;
}
.me-footer {
  margin-top: 0;
  background: #180e16;
}

@media (hover:hover) and (pointer:fine) {
  .me-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,225,234,.34);
    background: linear-gradient(180deg, rgba(93,50,71,.6), rgba(74,38,58,.6));
  }
  .me-tab:hover:not(.active) { background: rgba(255,255,255,.07); }
  .me-btn:hover { transform: translateY(-2px); }
}

@media (max-width: 900px) {
  .me-main { padding-inline: .9rem; }
  .me-card { grid-template-columns: minmax(0, 1fr) 230px; gap: 1rem; }
  .me-tabs-wrap, .me-timeline { width: 100%; }
}

@media (max-width: 700px) {
  .me-main { padding: 5.7rem .75rem 3rem; }
  .me-title { font-size: clamp(3rem, 16vw, 4.7rem); }
  .me-kicker { font-size: .72rem; letter-spacing: .32em; }
  .me-subtitle { font-size: .74rem; letter-spacing: .18em; line-height: 1.6; }
  .me-tabs-wrap { top: 72px; margin-top: 1.4rem; }
  .me-tabs {
    display: flex;
    overflow-x: auto;
    gap: .4rem;
    border-radius: 14px;
    scrollbar-width: none;
  }
  .me-tabs::-webkit-scrollbar { display: none; }
  .me-tab { flex: 0 0 138px; min-height: 46px; }
  .me-timeline { padding-left: 0; }
  .me-line, .me-node { display: none; }
  .me-item { scroll-margin-top: 150px; }
  .me-card {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  .me-photo { height: 185px; order: -1; }
  .me-name { font-size: 1.55rem; }
  .me-desc { font-size: .9rem; }
  .me-btn { margin-top: .9rem; }
  .me-shape-left, .me-shape-right { opacity: .12; }
}