/* ==========================================================================
   À propos (page-histoire.php) — editorial page.
   banner · founder · who/origin · timeline · credentials · areas · why (royal band) · protocol · elements · closing.
   Display titles in Marcellus (loaded for this template in functions.php), body in Jost.
   ========================================================================== */

/* Shared bits */
.about .ab-label { margin: 0 0 .9rem; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--c-royal); }
.about .ab-label--light { color: var(--c-champagne); }
.headings-sans .about .ab-display, .about .ab-display { margin: 0 0 1rem; font-family: 'Marcellus', var(--f-heading); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400; line-height: 1.1; letter-spacing: 0; color: var(--c-navy); }
.headings-sans .about .ab-display--md, .about .ab-display--md { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; }
.headings-sans .about .ab-display--light, .about .ab-display--light { color: #fff; }
.headings-sans .about .ab-h2, .about .ab-h2 { margin: 0 0 .9rem; font-family: 'Marcellus', var(--f-heading); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 400; letter-spacing: 0; color: var(--c-navy); }
.about .ab-text { margin: 0 0 1.25rem; max-width: 56ch; font-size: .96rem; line-height: 1.85; color: var(--c-ink); }
.about .ab-text--center { margin-inline: auto; text-align: center; }
.about .ab-center { max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.about .section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.about .btn--hero { min-height: 52px; padding: .9rem 2.2rem; border: 0; border-radius: 0; background: var(--c-champagne); color: var(--c-navy); font-size: .72rem; font-weight: 600; letter-spacing: .22em; }
.about .btn--hero:hover { background: #fff; color: var(--c-navy); }

/* Decorative sprig (same drawing as the homepage) */
.about .motif { position: absolute; z-index: 0; display: none; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.about .motif--sprig { stroke: var(--c-royal); stroke-width: 1; }
.about .motif__berry { fill: var(--c-royal); stroke: none; }

/* 1. Banner */
.ab-banner { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(360px, 52vh, 520px); margin-top: calc(-1 * var(--header-h) - 1px); padding-top: var(--header-h); overflow: hidden; background: var(--c-navy); text-align: center; color: #fff; }
.ab-banner__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ab-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--c-ink-rgb), .55), rgba(var(--c-ink-rgb), .45) 60%, rgba(var(--c-ink-rgb), .6)); }
.ab-banner__copy { padding-block: 3rem; }
.headings-sans .ab-banner__title, .ab-banner__title { margin: 0 0 .9rem; font-family: 'Marcellus', var(--f-heading); font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 400; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 22px rgba(var(--c-ink-rgb), .3); }
.ab-banner__sub { margin: 0 auto; max-width: 46ch; font-size: clamp(.98rem, 1.3vw, 1.1rem); color: rgba(255, 255, 255, .92); }
/* The page banner sits under the transparent header: light header items until scroll. */
.page-template-page-histoire:not(.nav-open) .site-header:not(.is-scrolled) .custom-logo { filter: brightness(0) invert(1); }
.page-template-page-histoire:not(.nav-open) .site-header:not(.is-scrolled) .menu > li > a,
.page-template-page-histoire:not(.nav-open) .site-header:not(.is-scrolled) .icon-btn { color: #fff; }
.page-template-page-histoire:not(.nav-open) .site-header:not(.is-scrolled) .cart-count { background: #fff; color: var(--c-navy); }

/* 2. Founder */
.ab-founder__grid { display: grid; gap: 2.5rem; align-items: center; max-width: 1100px; }
.ab-founder__media { margin: 0 auto; width: min(100%, 400px); overflow: hidden; border-radius: 50% 50% 6px 6px / 32% 32% 6px 6px; background: var(--c-sand); }
.ab-founder__media img, .ab-founder__media .ph { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.ab-founder__role { margin: -.25rem 0 1.5rem; font-size: .82rem; font-weight: 500; letter-spacing: .06em; color: var(--c-royal); }
.ab-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .5rem 0 2rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); }
.ab-facts > div { padding: 0 1rem; }
.ab-facts > div:first-child { padding-left: 0; }
.ab-facts > div + div { border-left: 1px solid var(--c-line); }
.ab-facts dt { font-family: 'Marcellus', var(--f-heading); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; color: var(--c-navy); }
.ab-facts dd { margin: .3rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--c-muted); }
@media (min-width: 900px) { .ab-founder__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(3rem, 7vw, 6rem); } .ab-founder__media { margin: 0; } }

/* 3. Who we are / origin */
.ab-intro { position: relative; overflow: clip; background: var(--c-soft-sand); }
.ab-intro__grid { position: relative; z-index: 1; display: grid; gap: 2.75rem; max-width: 1100px; }
.ab-num { display: block; margin-bottom: .6rem; font-family: 'Marcellus', var(--f-heading); font-size: 2.6rem; line-height: 1; color: var(--c-champagne); }
@media (min-width: 900px) { .ab-intro__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 7vw, 6rem); } }
@media (min-width: 1100px) { .about .motif { display: block; } .ab-intro__sprig { right: max(20px, calc(50% - 700px)); bottom: -10px; width: 110px; opacity: .35; transform: rotate(8deg); } }

/* 4. Path: vertical timeline */
.ab-path__grid { display: grid; gap: 2.25rem; max-width: 1100px; }
.about ol.ab-timeline { position: relative; margin: 0; padding: 0 0 0 2.25rem; list-style: none; } /* beats the ol[class] reset */
.ab-timeline::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 1px; background: var(--c-champagne); }
.ab-timeline__item { position: relative; padding-bottom: 2.25rem; }
.ab-timeline__item:last-child { padding-bottom: 0; }
.ab-timeline__item::before { content: ""; position: absolute; left: -2.25rem; top: .55rem; width: 11px; height: 11px; margin-left: calc(.45rem - 5px); border: 2px solid var(--c-royal); border-radius: 50%; background: #fff; }
.ab-timeline__year { margin: 0 0 .25rem; font-family: 'Marcellus', var(--f-heading); font-size: 1.5rem; line-height: 1.2; color: var(--c-royal); }
.headings-sans .ab-timeline__title, .ab-timeline__title { margin: 0 0 .5rem; font-family: var(--f-body); font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-navy); }
.ab-timeline__text { margin: 0; max-width: 60ch; font-size: .94rem; line-height: 1.8; color: var(--c-muted); }
@media (min-width: 900px) {
	.ab-path__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); column-gap: clamp(3rem, 7vw, 6rem); align-items: start; }
	.ab-path__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* 5. Credentials */
.ab-creds { display: grid; background: var(--c-soft-sand); }
.ab-creds__media { position: relative; overflow: hidden; min-height: 280px; background: var(--c-sand); }
.ab-creds__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.ab-creds__copy { padding: clamp(2.75rem, 6vw, 4.5rem) var(--gutter); }
.ab-creds__list { display: grid; gap: 0 1.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.ab-creds__list li { display: flex; align-items: flex-start; gap: .8rem; padding: .95rem 0; border-top: 1px solid var(--c-line-strong); font-size: .93rem; font-weight: 500; color: var(--c-ink); }
.ab-creds__mark { flex: none; width: 9px; height: 9px; margin-top: .45rem; border: 1.5px solid var(--c-royal); border-radius: 50%; }
@media (min-width: 600px) { .ab-creds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
	.ab-creds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(440px, 36vw, 560px); }
	.ab-creds__copy { align-self: center; max-width: 600px; padding-inline: clamp(2.5rem, 6vw, 5.5rem); }
}

/* 6. Areas of support */
.ab-areas__grid { display: grid; gap: 2.5rem; max-width: 1100px; margin-inline: auto; }
.ab-areas__col { text-align: center; }
.ab-areas__icon { display: inline-block; margin-bottom: .9rem; color: var(--c-royal); }
.ab-areas__icon .line-icon { width: 46px; height: 46px; stroke-width: 1.15; }
.headings-sans .ab-areas__title, .ab-areas__title { margin: 0 0 1rem; font-family: 'Marcellus', var(--f-heading); font-size: 1.35rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--c-navy); }
.ab-areas__list { margin: 0 auto; padding: 0; max-width: 280px; list-style: none; }
.ab-areas__list li { padding: .6rem 0; border-top: 1px solid var(--c-line); font-size: .9rem; color: var(--c-ink); }
@media (min-width: 900px) { .ab-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } }

/* 7. Quality + why MESK: royal band, glass cards */
.ab-why { background: var(--c-navy); color: #fff; }
.ab-why__grid { display: grid; gap: 2.5rem; max-width: 1180px; }
.ab-why__lead { margin: 0 0 1.25rem; font-size: 1.02rem; color: var(--c-champagne); }
.ab-why__quality { margin: 0; max-width: 52ch; font-size: .92rem; line-height: 1.85; color: rgba(255, 255, 255, .85); }
.ab-why__cards { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ab-why__card { padding: 1.6rem 1.5rem; border: 1px solid rgba(var(--c-champagne-rgb), .35); border-radius: 6px; background: rgba(255, 255, 255, .05); }
.ab-why__icon { display: block; margin-bottom: .8rem; color: var(--c-champagne); }
.ab-why__icon .line-icon { width: 42px; height: 42px; stroke-width: 1.2; }
.headings-sans .ab-why__title, .ab-why__title { margin: 0 0 .45rem; font-family: var(--f-body); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ab-why__text { margin: 0; font-size: .9rem; line-height: 1.65; color: rgba(255, 255, 255, .82); }
@media (min-width: 600px) { .ab-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ab-why__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(3rem, 6vw, 5.5rem); align-items: center; } }

/* 8. The MESK protocol: five arched photo cards */
.ab-proto__head { max-width: 700px; }
.ab-proto__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; }
.ab-proto__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
.ab-pill { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--c-navy); }
.ab-pill:hover { color: var(--c-navy); }
.ab-pill__media { display: block; width: 100%; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 50% 50% 6px 6px / 36% 36% 6px 6px; background: var(--c-soft-sand); box-shadow: 0 0 0 4px #fff, 0 0 0 5px transparent; transition: box-shadow .4s var(--ease); }
.ab-pill__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--ease); }
.ab-pill:hover .ab-pill__media, .ab-pill:focus-visible .ab-pill__media { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-royal); }
.ab-pill:hover .ab-pill__media img { transform: scale(1.05); }
.ab-pill__num { margin-top: .6rem; font-family: 'Marcellus', var(--f-heading); font-size: 1.3rem; line-height: 1; color: var(--c-champagne); }
.ab-pill__name { font-size: .72rem; font-weight: 600; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 1000px) {
	.ab-proto__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 2rem); }
	.ab-proto__list > li:last-child:nth-child(odd) { grid-column: auto; width: auto; }
}

/* 9. Four elements: shared component (elements.css); keep its ivory band here. */
.about .elements3 { border: 0; }

/* 10. Closing: quote over a photo */
.ab-close { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 8vw, 6.5rem); background: var(--c-navy); text-align: center; color: #fff; }
.ab-close__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ab-close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--c-navy-rgb), .78); }
.ab-close__inner { max-width: 820px; }
.ab-close__quote { margin: 0 0 1.5rem; padding: 0; border: 0; }
.ab-close__quote p { margin: 0 0 1rem; font-family: 'Marcellus', var(--f-heading); font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.3; color: #fff; }
.ab-close__quote footer { font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--c-champagne); }
.ab-close__text { margin: 0 auto 2rem; max-width: 46ch; color: rgba(255, 255, 255, .85); }
.ab-close__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; }
.ab-close__link { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.ab-close__link:hover { color: var(--c-champagne); border-color: var(--c-champagne); }
.ab-close__address { display: inline-flex; align-items: center; gap: .45rem; margin: 2rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .8); }

/* Why MESK cards on phones: a swipeable row that advances by itself (main.js "Auto row"). */
@media (max-width: 599px) {
	.about .ab-why__cards { display: flex; gap: .75rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
	.about .ab-why__cards::-webkit-scrollbar { display: none; }
	.about .ab-why__card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* MESK protocol pillars on phones and tablets: a swipeable row that advances by itself. */
@media (max-width: 999px) {
	.about ol.ab-proto__list { display: flex; gap: 1rem; margin: 0 calc(-1 * var(--gutter)); padding: .5rem var(--gutter) .25rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
	.about ol.ab-proto__list::-webkit-scrollbar { display: none; }
	.about .ab-proto__list > li, .about .ab-proto__list > li:last-child:nth-child(odd) { flex: 0 0 56%; width: auto; justify-self: auto; scroll-snap-align: start; }
}
@media (min-width: 600px) and (max-width: 999px) { .about .ab-proto__list > li, .about .ab-proto__list > li:last-child:nth-child(odd) { flex-basis: 30%; } }

/* Areas of support: centre the lists (beats the ul[class] margin reset) and the titles on every screen. */
.about ul.ab-areas__list { margin: 0 auto; width: 100%; max-width: 300px; }
.about .ab-areas__col { display: flex; flex-direction: column; align-items: center; }
.headings-sans .about .ab-areas__title, .about .ab-areas__title { max-width: 22ch; text-wrap: balance; }