/* =========================================================
   AXL Studios — about.css
========================================================= */

.pp-story{
  position:relative;
  width:100%;
  padding:clamp(48px,8vw,120px) var(--container-pad);
  display:flex;
  justify-content:flex-end;
  background-image:url("../../story-placeholder-1920x1310.jpg");
  background-size:cover;
  background-position:center;
  background:transparent;
}
.pp-story-inner{
  width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(32px,5vw,80px);
}
.pp-story-title{
  margin:0;
  font-size:0;
}
.pp-story-title-plain,
.pp-story-title-italic,
.pp-story-title-accent{
  display:inline-block;
  font-family:"Urbanist";
  font-weight:800;
  line-height:1.1;
  font-size:clamp(28px,5vw,80px);
  color:var(--axl-text-100);
}
.pp-story-title-italic{
  font-style:italic;
  font-size:clamp(32px,5.8vw,92px);
  letter-spacing:-0.5px;
}
.pp-story-title-accent{ color:var(--axl-pink-300); }
.pp-story-title span + span{ margin-left:.15em; }

.pp-story-subtitle{
  margin:0;
  color:var(--axl-text-100);
  font-family:"Urbanist";
  font-weight:700;
  font-size:clamp(16px,3vw,48px);
  line-height:1.25;
  text-wrap:pretty;
}

.pp-story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,5vw,80px);
  padding:0 var(--container-pad);
}
@media (max-width:1200px){
  .pp-story-grid{
    grid-template-columns:repeat(2,1fr);
    padding:0;
  }
}
@media (max-width:800px){
  .pp-story-grid{ grid-template-columns:1fr; }
}

.pp-story-col-title{
  margin:0 0 10px;
  color:#fff;
  font-family:"Urbanist";
  font-weight:600;
  font-size:clamp(18px,2.2vw,32px);
  line-height:1.2;
}
.pp-story-col-text{
  margin:0;
  color:var(--axl-text-100);
  font-family:"Inter";
  font-weight:400;
  font-size:clamp(14px,1.2vw,18px);
  line-height:1.6;
}

.pp-quote{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(12px,1.2vw,24px);
  align-items:start;
}
.pp-quote .pp-quote-mark{
  color:var(--axl-pink-300);
  font-family:"Urbanist";
  font-weight:700;
  font-size:clamp(56px,6vw,104px);
  line-height:1.1;
}
.pp-quote-text{
  margin:0;
  color:var(--axl-text-100);
  font-family:"Urbanist";
  font-style:italic;
  font-weight:700;
  font-size:clamp(20px,3.2vw,48px);
  line-height:clamp(28px,4vw,60px);
}
.pp-quote-text > span{
  display:block;
  margin-bottom:clamp(2px,.25vw,5px);
}
.pp-quote-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(2px,.25vw,5px);
  width:max-content;
}
.pp-quote-stack > .pp-quote-line--second{
  position:relative;
  display:inline-block;
  width:max-content;
}
.pp-quote-text > span:last-child{
  margin-bottom:0;
  display:block;
}
.pp-quote-row-third{
  display:block;
}
.pp-quote-last{ display:block; }
.pp-quote-mark--end{
  position:absolute;
  display:inline-block;
  left:calc(100% + .06em + 10px);
  top:calc(100% + clamp(2px,.25vw,5px));
  line-height:1;
  transform:scaleX(-1);
}

@media (max-width:980px){
  .pp-quote-stack{
    display:block;
    width:auto;
  }
  .pp-quote-row-third{
    display:block;
  }
  .pp-quote-mark--end{
    position:static;
    margin-left:.12em;
    left:auto;
    top:auto;
  }
}

@media (max-width:560px){
  .pp-story-title br,
  .pp-story-subtitle br{
    display:none;
  }
  .pp-quote{
    grid-template-columns:1fr;
    gap:8px;
  }
  .pp-quote .pp-quote-mark{
    font-size:clamp(44px,12vw,64px);
  }
  .pp-quote-text{
    font-size:clamp(18px,6vw,28px);
    line-height:1.35;
  }
}