/*
 * About page: rules that belong to this design only (shared components live in assets/core.css).
 * Look: left-aligned page header, facts band, timeline, big pull quotes, alternating bio rows.
 */

/* ---- story + timeline ---- */
.pbbp-story{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:start}
.pbbp-story p+p{margin-top:18px}
.pbbp-story > div:nth-child(2) .pbbp-minor{padding-top:6px}
.pbbp-chips{display:flex;flex-wrap:wrap;gap:10px}
.pbbp-chips li{padding:7px 16px;border:1px solid var(--pbbp-line);border-radius:999px;background:var(--pbbp-panel);color:var(--pbbp-heading);font-size:14px;transition:border-color .2s,color .2s}
.pbbp-chips li a{color:inherit;text-decoration:none;display:block;margin:-7px -16px;padding:7px 16px}
.pbbp-chips li:has(a){border-color:rgba(var(--pbbp-accent-rgb),.6)}
.pbbp-chips li:hover{border-color:var(--pbbp-accent);color:var(--pbbp-accent-hi)}

.pbbp .pbbp-timeline{position:relative;margin:0;padding:0 0 0 36px;list-style:none}
.pbbp .pbbp-timeline li{position:relative;margin:0;padding:0 0 30px;list-style:none}
.pbbp .pbbp-timeline li:last-child{padding-bottom:0}
/* dot and connecting line are both drawn from the same li, so they can never drift apart */
.pbbp .pbbp-timeline li::before{content:"";position:absolute;box-sizing:border-box;left:-36px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--pbbp-bg);border:3px solid var(--pbbp-accent);z-index:1}
.pbbp .pbbp-timeline li::after{content:"";position:absolute;box-sizing:border-box;left:-28px;top:24px;bottom:-6px;width:2px;background:linear-gradient(to bottom,var(--pbbp-accent),rgba(var(--pbbp-accent-rgb),.35))}
.pbbp .pbbp-timeline li:last-child::after{display:none}
.pbbp-when{display:block;font:800 26px/1.2 var(--pbbp-serif);color:var(--pbbp-heading)}
.pbbp-what{display:block;margin-top:4px;font-size:15px}

/* ---- album covers (used when any album has an image) ---- */
.pbbp-covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:18px}
.pbbp-covers li{min-width:0}
.pbbp-covers a{display:block;color:inherit;text-decoration:none}
.pbbp-covers__img{display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--pbbp-line);background:linear-gradient(145deg,var(--pbbp-panel),var(--pbbp-bg2));transition:transform .2s,border-color .2s}
.pbbp-covers__img img{display:block;width:100%;height:100%;object-fit:cover}
.pbbp-covers__name{display:block;margin-top:9px;font-size:14px;line-height:1.3;color:var(--pbbp-heading)}
.pbbp-covers a:hover .pbbp-covers__img{transform:translateY(-3px);border-color:var(--pbbp-accent)}
.pbbp-covers a:hover .pbbp-covers__name{color:var(--pbbp-accent-hi)}

/* ---- latest album panel ---- */
.pbbp-latest{padding:0 0 clamp(70px,10vw,130px)}
.pbbp-latest__row{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;background:var(--pbbp-panel);border:1px solid var(--pbbp-line);border-left:4px solid var(--pbbp-accent);border-radius:8px;padding:clamp(28px,4vw,48px)}
.pbbp-latest__row:not(:has(.pbbp-latest__cover)){grid-template-columns:1fr}
.pbbp-latest__cover img{display:block;width:min(300px,100%);aspect-ratio:1;object-fit:cover;border-radius:6px;box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.pbbp-latest__body p{margin-top:14px;max-width:560px}
.pbbp-latest__body .pbbp-cta{justify-content:flex-start;margin-top:26px}

/* ---- big quotes ---- */
.pbbp-quotes__row{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.pbbp-bigquote{position:relative;padding-top:58px}
.pbbp-bigquote::before{content:"“";position:absolute;top:-14px;left:-6px;font:800 150px/1 var(--pbbp-serif);color:rgba(var(--pbbp-accent-rgb),.28)}
.pbbp-bigquote p{font:italic 400 clamp(21px,2.3vw,28px)/1.5 var(--pbbp-serif);color:var(--pbbp-heading)}
.pbbp-bigquote cite{display:block;margin-top:22px;font:800 12px var(--pbbp-sans);letter-spacing:.25em;text-transform:uppercase;font-style:normal;color:var(--pbbp-accent)}

/* ---- what we play ---- */
.pbbp-play{align-items:start}
.pbbp-callout{background:var(--pbbp-panel);border:1px solid var(--pbbp-line);border-left:4px solid var(--pbbp-accent);border-radius:8px;padding:38px 36px}
.pbbp-callout h3{margin:0 0 16px;font-size:30px}
.pbbp-callout p{font-size:16px}
.pbbp-callout p+p{margin-top:16px}

/* ---- photo strip between sections ---- */
.pbbp-stripband{padding:0 0 clamp(40px,6vw,80px)}
.pbbp-stripband figure{width:min(1280px,100% - 40px);margin-inline:auto;overflow:hidden;border-radius:8px;border:1px solid var(--pbbp-line)}
.pbbp-stripband img{width:100%;filter:saturate(.9) contrast(1.05)}

/* ---- members: alternating rows ---- */
.pbbp-people{padding-top:clamp(40px,6vw,80px)}
.pbbp-person{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--pbbp-line)}
.pbbp-people .pbbp-wrap > .pbbp-rv + .pbbp-person{margin-top:40px}
.pbbp-person:nth-of-type(even){grid-template-columns:1fr 320px}
.pbbp-person:nth-of-type(even) .pbbp-person__media{order:2}
.pbbp-person__media{aspect-ratio:4/5;border-radius:8px;overflow:hidden;border:1px solid var(--pbbp-line);background:linear-gradient(145deg,var(--pbbp-panel),var(--pbbp-bg2));display:grid;place-items:center;position:relative}
.pbbp-person__media img{width:100%;height:100%;object-fit:cover}
.pbbp-badge{font:800 clamp(120px,16vw,200px)/1 var(--pbbp-serif);color:transparent;-webkit-text-stroke:2px rgba(var(--pbbp-accent-rgb),.55);background:linear-gradient(145deg,var(--pbbp-accent2),var(--pbbp-accent));-webkit-background-clip:text;background-clip:text;opacity:.9}
.pbbp-person__media img{position:absolute;inset:0}
.pbbp-person__media:has(img)::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--pbbp-hero-rgb),.85),rgba(var(--pbbp-hero-rgb),0) 55%)}
.pbbp-badge--over{position:absolute;z-index:2;left:18px;bottom:.16em;line-height:1.2;font-size:clamp(90px,11vw,140px);background:none;-webkit-background-clip:border-box;background-clip:border-box;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);opacity:.9;text-shadow:none}
.pbbp-person__body h3{font-size:clamp(30px,4vw,44px);margin:6px 0 18px}
.pbbp-person__body p+p{margin-top:16px}
.pbbp .pbbp-says{margin:24px 0 0;padding-left:22px;border-left:3px solid var(--pbbp-accent);font:italic 400 19px/1.55 var(--pbbp-serif);color:var(--pbbp-heading)}
.pbbp-list{margin-top:24px;padding:20px 24px;background:var(--pbbp-panel);border:1px solid var(--pbbp-line);border-radius:8px}
.pbbp .pbbp-list h4{margin:0 0 10px;font:800 12px var(--pbbp-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--pbbp-accent)}
.pbbp-list li{position:relative;padding-left:18px;font-size:15px}
.pbbp-list li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--pbbp-accent)}

@media (max-width:900px){
  .pbbp-latest__row{grid-template-columns:1fr;gap:28px}
  .pbbp-story,.pbbp-quotes__row{grid-template-columns:1fr;gap:48px}
  .pbbp-person,.pbbp-person:nth-of-type(even){grid-template-columns:1fr;gap:32px}
  .pbbp-person:nth-of-type(even) .pbbp-person__media{order:0}
  .pbbp-person__media{max-width:340px}
}