/* ============================================================
   ABOUT — the about page layout. Every interest gets its own
   section with the same two-column panel, so the page reads in a
   steady rhythm. Base About styles (intro, headings, prose,
   chips, verse, buttons) live in style.css.
   ============================================================ */

.ab { width: min(980px, 94vw); }

/* shared glass surface */
.ab__tlcard,
.ab__missions,
.ab__panel,
.ab__tile,
.ab__bucket li {
  background: linear-gradient(135deg, rgba(30,10,60,0.55), rgba(12,4,30,0.6));
  border: 1px solid rgba(176,38,255,0.28);
  box-shadow: 0 0 24px rgba(176,38,255,0.14), inset 0 0 18px rgba(138,43,226,0.08);
  backdrop-filter: blur(8px);
}

/* ---------- intro tags ---------- */
.ab__tags {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ab__tags li {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e3d8ff;
  background: rgba(176,38,255,0.12);
  border: 1px solid rgba(176,38,255,0.4);
}


/* ---------- timeline ---------- */
.ab__tl {
  --rail: 150px;                      /* where the glowing line runs */
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.2vh, 20px);
}
.ab__tl::before {
  content: "";
  position: absolute;
  left: var(--rail);
  top: 8px;
  bottom: 8px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--purple-light) 6%, var(--purple) 90%, transparent);
  box-shadow: 0 0 12px var(--purple-neon);
}
.ab__tlitem {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--rail) - 26px) 1fr;
  gap: 52px;
  align-items: start;
}
.ab__tlitem::before {                 /* the dot on the line */
  content: "";
  position: absolute;
  left: var(--rail);
  top: 22px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(138,43,226,0.45), 0 0 16px var(--purple-neon);
}
.ab__tlwhen {
  padding-top: 15px;
  text-align: right;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.2;
  color: var(--purple-light);
  text-shadow: 0 0 10px rgba(176,38,255,0.55);
}
.ab__tlcard {
  padding: clamp(15px, 2vw, 20px) clamp(16px, 2.2vw, 22px);
  border-radius: 16px;
}
.ab__tlcard h3 {
  margin: 0 0 6px;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(17px, 2.1vw, 21px);
  color: #fff;
}
.ab__tlcard p { margin: 0; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; color: #d9cffa; }
.ab__tlcard a { color: var(--purple-light); }
/* "right now" glows, "next year" is still to come */
.ab__tlitem.is-now::before { background: var(--purple-light); animation: tl-pulse 2.2s ease-in-out infinite; }
.ab__tlitem.is-now .ab__tlcard { border-color: rgba(199,125,255,0.6); box-shadow: 0 0 30px rgba(176,38,255,0.3); }
.ab__tlitem.is-next::before { background: transparent; border: 2px solid var(--purple-light); }
.ab__tlitem.is-next .ab__tlcard { border-style: dashed; background: rgba(20,4,45,0.3); }
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(138,43,226,0.45), 0 0 16px var(--purple-neon); }
  50%      { box-shadow: 0 0 0 9px rgba(138,43,226,0.15), 0 0 26px var(--purple-neon); }
}

/* ---------- faith ---------- */
.ab__faith { scroll-margin-top: 40px; }
.ab__faithgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 40px);
  align-items: start;
}
.ab__missions {
  padding: clamp(18px, 2.4vw, 24px);
  border-radius: 18px;
}
.ab__missions .ab__sub { margin-top: 0; }
.ab__missions p { margin: 16px 0 0; font-size: clamp(14px, 1.7vw, 15.5px); line-height: 1.65; color: #d9cffa; }

/* ---------- interest sections: one panel each, same layout every time ---------- */
.ab__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border-radius: 22px;
  overflow: hidden;
}
.ab__panelmain,
.ab__panelside { padding: clamp(20px, 3vw, 32px); }
.ab__panelmain { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; }
.ab__panelmain .ab__icon { margin-bottom: 2px; }
.ab__panelmain p { margin: 0; font-size: clamp(15px, 1.8vw, 17px); line-height: 1.7; color: #d9cffa; }
.ab__panelside {
  background: rgba(10,3,24,0.28);
  border-left: 1px solid rgba(176,38,255,0.2);
}
.ab__panelside .ab__sub:first-child { margin-top: 0; }
.ab__panelside .ab__chips { gap: 8px; }
.ab__panelside .ab__chips li { padding: 7px 13px; font-size: 13.5px; }
.ab__panelbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ab__btn--sm { padding: 10px 18px; font-size: 14px; letter-spacing: 1.5px; }

.ab__panelmain .ab__aside {
  padding-left: 14px;
  border-left: 2px solid rgba(199,125,255,0.6);
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 15.5px);
  color: #b9a6d6;
}

/* What I Listen To: a header strip across the top, the two artist lists side by side underneath */
.ab__listen { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.ab__listenhead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px);
  border-bottom: 1px solid rgba(176,38,255,0.2);
}
.ab__listenhead .ab__icon { flex: none; margin: 0; }
.ab__listenhead p { margin: 0; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.6; color: #e3d8ff; }
.ab__listencol { padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px); }
.ab__listencol + .ab__listencol { background: rgba(10,3,24,0.28); border-left: 1px solid rgba(176,38,255,0.2); }
.ab__listencol .ab__sub { margin-top: 0; }
.ab__listencol .ab__chips { gap: 8px; }
.ab__listencol .ab__chips li { padding: 7px 13px; font-size: 13.5px; }

/* My Faith: title centred over the cross + verse so the section reads as one piece */
.ab__faith > .ab__h2 { text-align: center; margin-bottom: 0; }
.ab__faith .ab__verse { margin-top: 0; }

/* simple stacked list (the must-rides) */
.ab__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(20,4,45,0.45);
  border: 1px solid rgba(176,38,255,0.22);
}
.ab__list li::before { content: "🎢"; }

/* latest mod, small */
.ab__modcard {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: rgba(20,4,45,0.45);
  border: 1px solid rgba(176,38,255,0.22);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ab__modcard:hover { border-color: rgba(199,125,255,0.6); box-shadow: 0 0 22px rgba(176,38,255,0.3); }
.ab__modcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; display: block; }
.ab__modcard b {
  display: block;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 17px;
}
.ab__modcard small { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #b9a6d6; }

/* ---------- a few more things: four even cards, 2 x 2 ---------- */
.ab__quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
.ab__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(18px, 2.4vw, 24px);
  border-radius: 20px;
}
.ab__tile .ab__icon { margin-bottom: 4px; }
.ab__tile h3 {
  margin: 0;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #fff;
}
.ab__tile p { margin: 0; font-size: clamp(14px, 1.6vw, 15.5px); line-height: 1.6; color: #c9b8e6; }
.ab__swatch {
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: conic-gradient(from 200deg, #6e00ff, var(--purple-light), var(--purple-neon), #6e00ff);
  box-shadow: 0 0 22px rgba(176,38,255,0.7), inset 0 0 10px rgba(255,255,255,0.25);
}

/* ---------- bucket list ---------- */
.ab__bucket {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 14px);
}
.ab__bucket li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: clamp(14px, 1.7vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.ab__bucket li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd one out spans the row */
.ab__bucket em {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgba(176,38,255,0.35);
}
.ab__check {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid rgba(199,125,255,0.7);
  box-shadow: 0 0 10px rgba(176,38,255,0.35);
}
.is-booked .ab__check { background: rgba(176,38,255,0.35); }
.is-booked .ab__check::after {        /* half-filled: booked, not done yet */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  background: var(--purple-light);
}

/* ---------- scroll reveal (js/about.js adds .is-pending to sections below the fold) ---------- */
[data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-pending { opacity: 0; transform: translateY(18px); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .ab__faithgrid { grid-template-columns: 1fr; }
  .ab__panel { grid-template-columns: 1fr; }
  .ab__panelside { border-left: 0; border-top: 1px solid rgba(176,38,255,0.2); }
  .ab__listencol + .ab__listencol { border-left: 0; border-top: 1px solid rgba(176,38,255,0.2); }
}
@media (max-width: 640px) {
  .ab__tags { justify-content: center; }
  .ab__tl { --rail: 8px; }
  .ab__tlitem { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; }
  .ab__tlitem::before { top: 4px; }
  .ab__tlwhen { padding-top: 0; text-align: left; }
  .ab__quad { grid-template-columns: 1fr; }
  .ab__bucket { grid-template-columns: 1fr; }
  .ab__modcard { grid-template-columns: 100px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-pending { opacity: 1; transform: none; }
}