/* =========================================================
   ABOUT — flooded deep violet
   ========================================================= */
#p-about .slab{padding:clamp(80px,11vw,136px) 0 clamp(64px,8vw,100px);
  background:radial-gradient(120% 92% at 78% 0%,rgba(112,40,111,.55),transparent 62%)}
#p-about .slab h1{font-size:clamp(2.7rem,10vw,7rem);font-weight:800}
#p-about .why{background:var(--soft);border-block:1px solid var(--line)}
/* the copy runs the full width of the band, with the pair of portraits
   centred underneath it */
#p-about .why .wrap{display:block}
#p-about .why .wrap > .eyebrow{margin-bottom:0}
#p-about .intro{max-width:none;margin-top:clamp(26px,3.4vw,38px)}
#p-about .intro .lede{max-width:none;margin:0 0 15px}
#p-about .intro .close{color:var(--fg);font-weight:600}
/* 634px = two ~289px portraits plus the 56px between them. The gap scales
   down on narrow screens so the two don't squeeze to nothing on a phone. */
#p-about .stack{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,5vw,56px);max-width:634px;margin:clamp(34px,4.6vw,56px) auto 0;
  text-align:center}
#p-about .stack .sidepic{margin:0}
#p-about .stack img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;border-radius:3px;filter:grayscale(1)}
#p-about .stack figcaption{margin-top:9px}
#p-about .stack .nm{display:block;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;font-size:.95rem;color:var(--fg)}
#p-about .stack .rl{display:block;margin-top:3px;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:#EC4BEF}
/* two narrow portraits plus a long name wrap badly on a small phone */
@media(max-width:420px){
  #p-about .stack .nm{font-size:.84rem}
}
#p-about .pull{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,2.3vw,1.5rem);line-height:1.2;letter-spacing:-.015em;
  margin:24px 0;padding-left:18px;border-left:4px solid #B909BD;color:var(--fg)}
#p-about .angle{background:rgba(0,0,0,.24)}
#p-about .loopwrap{position:relative;padding:10px clamp(46px,6vw,74px)}
#p-about .path{position:relative}
/* the serpentine loop caps that join one row to the next */
#p-about .path .stop::after{content:"";position:absolute;top:-4px;bottom:-4px;
  width:clamp(40px,5vw,66px);border:4px solid #B909BD;pointer-events:none}
#p-about .path .stop:nth-child(odd)::after{right:calc(clamp(40px,5vw,66px) * -1);
  border-left:0;border-radius:0 999px 999px 0}
#p-about .path .stop:nth-child(even)::after{left:calc(clamp(40px,5vw,66px) * -1);
  border-right:0;border-radius:999px 0 0 999px}
/* only the two loose ends carry off the screen */
#p-about .path::before,#p-about .path::after{content:"";position:absolute;
  width:100vw;height:4px;background:#B909BD;pointer-events:none}
#p-about .path::before{top:0;right:100%}
#p-about .path::after{bottom:0;left:100%}
#p-about h2{font-size:clamp(1.8rem,4.8vw,3.1rem);margin-bottom:40px}
#p-about .stop{position:relative;display:grid;grid-template-columns:126px 1fr;gap:clamp(18px,4vw,44px);
  padding:30px 0;border-top:4px solid #B909BD;align-items:baseline}
#p-about .stop:last-child{border-bottom:4px solid #B909BD}
#p-about .stop .yr{font-family:var(--display);font-weight:800;
  font-size:1.45rem;color:var(--acc)}
#p-about .stop h4{font-size:1.45rem;margin:0 0 9px;font-weight:700;line-height:1.15}
#p-about .stop p{color:var(--dim);font-size:.94rem;line-height:1.6;margin:0;max-width:60ch}
#p-about .beliefs{padding:clamp(70px,9vw,116px) 0 clamp(80px,10vw,124px)}
#p-about .bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
#p-about .belief{padding:26px}
#p-about .belief b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:1.1rem;color:var(--acc);margin-bottom:9px}
#p-about .belief p{color:var(--dim);font-size:.92rem;line-height:1.58;margin:0}
@media(max-width:820px){
  #p-about .stop{grid-template-columns:1fr;gap:6px}
}

/* what we believe — off-white cards */
#p-about .belief{--fill:#F7F4EA;color:#041E4B;border-color:rgba(4,30,75,.16)}
#p-about .belief b{color:#8C0B90}
#p-about .belief p{color:rgba(4,30,75,.76)}

/* --- small screens --------------------------------------------------- */
@media (max-width:720px){
  #p-about .stop .yr,#p-about .stop h4{font-size:1.25rem}
}