/* ==========================================================================
   Biography Studio — page-about.css
   About — long-form editorial, founder portrait, manifesto close.
   Background sequence: cream → white → cream → white → blue-grey → white
   ========================================================================== */


/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.bsab-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.bsab-reveal--in {
	opacity: 1;
	transform: none;
}


/* ==========================================================================
   1 · HERO — text left, wood plane right
   ========================================================================== */
.bsab-hero {
	background-color: var(--bs-cream);
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,254,250,0.8) 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 5% 95%, rgba(237,229,217,0.35) 0%, transparent 50%);
	padding: 96px 0 104px;
}
.bsab-hero__inner {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   80px;
	align-items:           center;
}
.bsab-hero__body {
	/* text column */
}
.bsab-hero__label {
	font-family:    var(--bs-ui-font);
	font-size:      0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--bs-pink-dark);
	margin-bottom:  20px;
}
.bsab-hero__heading {
	font-family:    var(--bs-heading-font);
	font-size:      clamp(2.25rem, 4.5vw, 4.75rem);
	font-weight:    400;
	font-style:     italic;
	line-height:    1.1;
	letter-spacing: -0.015em;
	color:          var(--bs-navy);
}

/* Art column — wood plane */
.bsab-hero__art {
	display:         flex;
	justify-content: center;
	align-items:     center;
}
.bsab-hero__plane {
	display:    block;
	width:      100%;
	max-width:  520px;
	height:     auto;
	/* lift it off the page — subtle shadow on cream */
	filter:     drop-shadow(0 12px 32px rgba(80, 60, 30, 0.18)) drop-shadow(0 2px 8px rgba(80, 60, 30, 0.12));
}


/* ==========================================================================
   2 · SHARED SECTION STYLES
   ========================================================================== */
.bsab-section {
	padding:    104px 0;
	border-top: 1px solid var(--bs-border-light);
}
.bsab-section--white { background: var(--bs-white); }
.bsab-section--cream { background: var(--bs-cream); }

/* Section label — small tracked eyebrow above copy */
.bsab-section__label {
	font-family:    var(--bs-ui-font);
	font-size:      1.125rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--bs-text-muted);
	margin-bottom:  28px;
}
.bsab-section__label--light {
	color: rgba(46, 74, 94, 0.6);
}

/* Single-column editorial layout — constrained for readability */
.bsab-section__inner {
	max-width: 720px;
}

/* Body copy — generous leading, readable measure */
.bsab-section__copy {
	font-family: var(--bs-body-font);
	font-size:   1.0625rem;
	line-height: 1.9;
	color:       var(--bs-text);
}
.bsab-section__copy p            { margin-bottom: 1.6em; }
.bsab-section__copy p:last-child { margin-bottom: 0; }


/* ==========================================================================
   2 · THE GENESIS — copy left, portrait right
   ========================================================================== */
.bsab-genesis__inner {
	display:               grid;
	grid-template-columns: 1fr 280px;
	gap:                   96px;
	align-items:           start;
}

/* Art column — sticky portrait */
.bsab-genesis__art {
	position:   sticky;
	top:        120px;
	text-align: center;
}

/* Circular portrait — B&W with cream halo ring */
.bsab-genesis__portrait {
	display:         block;
	width:           clamp(200px, 20vw, 260px);
	height:          clamp(200px, 20vw, 260px);
	border-radius:   50%;
	object-fit:      cover;
	object-position: center 15%; /* keep face prominent */
	margin:          0 auto 20px;
	box-shadow:
		0 0 0 6px var(--bs-cream),
		0 0 0 7px var(--bs-border-light);
}

/* Caption */
.bsab-genesis__name {
	font-family:    var(--bs-ui-font);
	font-size:      0.8125rem;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--bs-navy);
	margin-bottom:  4px;
}
.bsab-genesis__title {
	font-family: var(--bs-body-font);
	font-size:   0.875rem;
	font-style:  italic;
	color:       var(--bs-text-muted);
}


/* ==========================================================================
   5 · OUR BELIEF — blue-grey accent, manifesto tone
   ========================================================================== */
.bsab-belief {
	background:  #ccd8e2;
	padding:     104px 0;
	border-top:  1px solid rgba(9, 58, 102, 0.1);
}
.bsab-belief__inner {
	max-width: 680px;
}
.bsab-belief__copy {
	font-family: var(--bs-body-font);
	font-size:   1.125rem;
	line-height: 1.85;
	color:       #2e4a5e;
}
.bsab-belief__copy p            { margin-bottom: 1.5em; }
.bsab-belief__copy p:last-child { margin-bottom: 0; }

/* Final line — slight emphasis */
.bsab-belief__close {
	font-family: var(--bs-heading-font);
	font-style:  italic;
	font-size:   1.25rem !important;
	color:       var(--bs-navy) !important;
	margin-top:  8px;
}


/* ==========================================================================
   6 · CLOSING CTA
   ========================================================================== */
.bsab-close {
	background:  var(--bs-white);
	padding:     112px 0;
	border-top:  1px solid var(--bs-border-light);
	text-align:  center;
}
.bsab-close__inner {
	max-width: 580px;
	margin:    0 auto;
}
.bsab-close__heading {
	font-family:    var(--bs-heading-font);
	font-size:      clamp(2rem, 4vw, 3.75rem);
	font-weight:    400;
	font-style:     italic;
	line-height:    1.12;
	letter-spacing: -0.01em;
	color:          var(--bs-navy);
	margin-bottom:  36px;
}
.bsab-close__rule {
	width:      40px;
	height:     2px;
	background: var(--bs-pink);
	margin:     0 auto 40px;
}
.bsab-close__ctas {
	display:         flex;
	flex-wrap:       wrap;
	gap:             14px;
	justify-content: center;
}


/* ==========================================================================
   RESPONSIVE — below 1024px
   ========================================================================== */
@media ( max-width: 1024px ) {

	.bsab-hero__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.bsab-hero__art {
		order: -1; /* plane above text on tablet */
	}
	.bsab-hero__plane {
		max-width: 380px;
	}

	.bsab-genesis__inner {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.bsab-genesis__art {
		position:   static;
		order:      -1; /* portrait above copy on tablet */
	}
	.bsab-genesis__portrait {
		width:  clamp(160px, 30vw, 220px);
		height: clamp(160px, 30vw, 220px);
	}

}


/* ==========================================================================
   RESPONSIVE — below 768px
   ========================================================================== */
@media ( max-width: 768px ) {

	.bsab-hero { padding: 56px 0 64px; }
	.bsab-hero__plane { max-width: 280px; }

	.bsab-section,
	.bsab-belief { padding: 64px 0 56px; }

	.bsab-close { padding: 80px 0; }
	.bsab-close__ctas { flex-direction: column; align-items: center; }
	.bsab-close__ctas .bsh-btn { width: 100%; max-width: 320px; text-align: center; }

}