/* About Q&A scroll box (rev. Nov 3 2026, 12:15 AM: custom always-visible scrollbar).
   The About box stays about one screen tall and the questions + answer scroll INSIDE it
   (.secondPageBlurb is the one scroller). Scroll chains to the page at the ends, so there is no trap. */
.secondPage{height:100vh;height:100dvh;min-height:0;padding:0;box-sizing:border-box;grid-template-rows:auto auto;align-content:center;row-gap:8px}
.secondPageCenterBoxContainer{height:min(56vh,56dvh,500px);min-height:0;grid-template-rows:minmax(0,1fr);overflow:visible}
.secondPageCenterBox{height:100%;min-height:0}
.secondPageBio{height:100%}
.secondPageBioImage{height:100%;min-height:0}
.secondPageBlurb{
  height:100%;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:auto;
  display:block;
  border-radius:10px;
  /* native bar hidden: a custom always-visible bar (js/about-scroll.js) replaces it */
  scrollbar-width:none;-ms-overflow-style:none;
}
.secondPageBlurb::-webkit-scrollbar{display:none;width:0;height:0}
.secondPageBlurb.qaHasBar{padding-right:40px}
/* custom scrollbar: always visible, draggable, click track to jump */
.secondPageCenterBox{position:relative}
.qaBar{position:absolute;z-index:5;width:22px;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.qaBarTrack{position:absolute;top:0;bottom:0;left:50%;width:14px;transform:translateX(-50%);background:#e6f3fa;border:1px solid #c4e1f2;border-radius:999px;box-shadow:inset 0 1px 3px rgba(0,0,0,.25);box-sizing:border-box}
.qaBarThumb{position:absolute;left:50%;width:14px;transform:translateX(-50%);min-height:36px;background:#1aa7e0;border:2px solid #0d7fb0;border-radius:999px;box-sizing:border-box;cursor:grab;transition:background .15s ease}
.qaBar:hover .qaBarThumb{background:#0d8cc4}
.qaBar.qaDragging .qaBarThumb{background:#3d6373;border-color:#2b4a57;cursor:grabbing}
.qaBar.qaNoScroll .qaBarThumb{opacity:.55;cursor:default}
.qaBar:focus-visible{outline:2px solid var(--babyBlue);outline-offset:2px;border-radius:999px}
/* the answer itself no longer scrolls separately: one scroll area only */
.secondPageBlurbQuestions{margin-bottom:16px}
.secondPageBlurbScrollText{height:auto;min-height:120px;max-height:none;overflow:visible;overflow-wrap:anywhere}
/* bottom fade hint, hidden when there is nothing more to scroll */
.secondPageBlurb::after{
  content:"";display:block;position:sticky;bottom:0;
  height:64px;margin-top:-64px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(12,14,19,0),rgba(12,14,19,.92));
  transition:opacity .25s ease;
}
.secondPageBlurb.qaAtEnd::after{opacity:0}
@media screen and (max-width:500px){
  .containerTitle{font-size:40px}
  /* never fill the whole phone screen, so there is always page to swipe past the box */
  .secondPageCenterBoxContainer{height:min(74vh,74dvh)}
  .secondPageBlurb{padding:10px 10px 0}
  .secondPageBlurb.qaHasBar{padding-right:38px}
  /* phones: 10px visual bar inside a 32px touch area */
  .qaBar{width:32px}
  .qaBarTrack,.qaBarThumb{width:10px}
  .qaBarThumb{min-height:44px}
  .secondPageBlurbQuestions{margin-bottom:12px}
  .secondPageBlurbScrollText{padding:16px;font-size:16px;line-height:1.5}
}