/* ===== About page — match Work/Contact, no conflicts ===== */

/* Page wrapper (same spacing as Work) */
#about-page .about-wrap{
  padding:140px 60px 80px;
  background:#000;
  color:#fff;
  min-height:100vh;
}

/* Title (same as Work hero) */
#about-page .about-hero h1{
  font-family:'FuturaCyrillicDemi',sans-serif;
  font-size:44px;
  text-align:center;
  margin:0 0 26px;
}

/* Grid: photo + intro text */
#about-page .about-grid{
  max-width:1080px;
  margin:0 auto 40px;
  display:grid;
  grid-template-columns:520px 1fr;
  gap:40px;
  align-items:start;
}

#about-page .about-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px; /* optional; remove if you don’t want it */
}

/* Intro text block (same type as Work/Contact) */
#about-page .about-text{ max-width:700px; }
#about-page .about-text p{
  font-family:'FuturaCyrillicBook',sans-serif;
  font-size:18px;
  line-height:1.6;
  color:#fff;
  margin:0 0 18px;
  -webkit-hyphens:none; hyphens:none;
  word-break:normal; overflow-wrap:break-word;
}

/* Long bio spans the full grid width (from image left to text right) */
.about-bio{
  grid-column: 1 / -1;   /* span both columns of the grid */
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}
.about-bio p{ margin: 0 0 18px; }

/* Mobile: grid stacks; bio still spans full width naturally */
@media (max-width: 960px){
  .about-bio{ margin-top: 20px; }
}


/* Top gradient under fixed header */
.top-fade{
  position:fixed;
  inset:0 0 auto 0;
  height:110px;            /* tweak if you want it taller/shorter */
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index:5;
}

/* Make sure header stays above it */
.main-header{ z-index:10; }

/* Responsive */
@media (max-width:960px){
  #about-page .about-grid{
    grid-template-columns:1fr;
  }
  #about-page .about-image,
  #about-page .about-text{
    max-width:700px;
    margin:0 auto;
  }
  #about-page .about-wrap{ padding:120px 24px 60px; }
}

/* Re-enable page scrolling only on the About page */
body#about-page{
  overflow-y: auto !important;   /* unlock scroll */
  height: auto !important;       /* don’t clamp to 100vh */
  min-height: 100vh;             /* keep at least a viewport tall */
  position: static !important;   /* in case a global set it fixed */
  -webkit-overflow-scrolling: touch;
}

/* Make sure inner wrappers don’t trap overflow */
#about-page .about-wrap{ overflow: visible !important; }
#about-page .top-fade{ pointer-events: none; }  /* gradient shouldn’t block scroll */

/* Intro text: stop justification gaps */
#about-page .about-text p{
  text-align: left !important;
  text-justify: auto;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  letter-spacing: normal;
}

/* Match Work/Contact spacing under the fixed header */
#about-page .about-wrap{
  padding: 120px 24px 80px;     /* same top padding as Contact */
}

/* Desktop: keep a bit more breathing room if you want */
@media (min-width: 900px){
  #about-page .about-wrap{ padding-top: 140px; }
}

/* —— Make About hero sit exactly like Work —————————————— */
#about-page .about-wrap{
  /* same as .work-wrap on desktop */
  padding: 140px 60px 80px;
}

/* same H1 treatment as Work */
#about-page .about-hero h1{
  font-family: 'FuturaCyrillicDemi', sans-serif;
  font-size: 44px;
  line-height: 1.1;        /* match Work */
  text-align: center;
  margin: 0 0 18px;        /* Work uses 18px bottom, 0 top */
}

/* kill any stray margins on the hero container itself */
#about-page .about-hero{ margin: 0; }

/* mobile: mirror Work’s mobile padding + H1 size */
@media (max-width: 680px){
  #about-page .about-wrap{ padding: 96px 16px 56px; }
  #about-page .about-hero h1{ font-size: 36px; margin: 0 0 18px; }
}



/* === Normalize About top spacing to match Work/Contact — inserted by cleanup === */
#about-page .about-wrap{ padding: calc(var(--header-h-desktop, 72px) + 40px) 60px 80px !important; }
@media (max-width:680px){
  #about-page .about-wrap{ padding: calc(var(--header-h-mobile, 56px) + 24px) 24px 60px !important; }
}