/* SafeRise - css/saferise-about-v2.css · About V2 (handover 26 Oct 2026)
   Every rule is scoped to .ab2 (the About page's <main>) so the shared nav,
   footer and system styles are untouched. Type and colour follow the live
   site: Cinzel 400 labels, Cormorant Garamond 300 headings, DM Sans 400 body;
   ivory #F2EDE3, gold #C9A03C, near-black #0c1013. Images are full-bleed at
   their own 1942 x 809 ratio; copy that runs longer than an image continues
   on the image's own ground colour below it, never clipped. */

.ab2{--ab-ink:#0c1013;--ab-ivory:#F2EDE3;--ab-ivory-bg:#efe6d7;--ab-gold:#C9A03C;--ab-gold-d:#8a6a28;
  --ab-body:#cfc9bf;--ab-body-d:#4a433a;--ab-head-d:#1d1915;
  --ab-serif:'Cormorant Garamond',Georgia,serif;--ab-sans:'DM Sans',system-ui,sans-serif;--ab-label:'Cinzel',serif;
  --ab-gut:clamp(20px,5vw,64px);--ab-wrap:1320px;--ab-nav:79px;--ab-ratio:calc(100vw * 809 / 1942);
  display:block;background:var(--ab-ink);color:var(--ab-body);font:400 17px/1.7 var(--ab-sans);overflow-x:clip}
.ab2 *{box-sizing:border-box}
.ab2 section{position:relative;padding:0;margin:0}
.ab2 p{margin:0 0 1.05em;font:inherit;color:inherit}
.ab2 h1,.ab2 h2,.ab2 h3{font-family:var(--ab-serif);font-weight:300;margin:0;text-wrap:balance}
.ab2 .ab-label{font:400 11px/1.6 var(--ab-label);letter-spacing:.32em;text-transform:uppercase;color:var(--ab-gold);margin:0 0 18px}
.ab2 .ab-label::after{content:"";display:block;width:28px;height:1px;background:currentColor;opacity:.7;margin-top:12px}

/* ── banded sections (01-04) ── */
.ab2 .ab-band{background:var(--ab-ink);color:var(--ab-body)}
.ab2 .ab-ivory{background:var(--ab-ivory-bg);color:var(--ab-body-d)}
.ab2 .ab-media{position:absolute;inset:0 0 auto 0;height:var(--ab-ratio);overflow:hidden;z-index:0}
.ab2 .ab-media img{display:block;width:100%;height:100%;object-fit:cover}
/* the image settles into its own ground colour at its foot */
.ab2 .ab-media::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(0deg,var(--ab-ink),rgba(12,16,19,0))}
.ab2 .ab-ivory .ab-media::after{background:linear-gradient(0deg,var(--ab-ivory-bg),rgba(239,230,215,0))}
/* legibility scrim on the copy side only; the people side stays as graded */
.ab2 .ab-left .ab-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,12,.72) 0%,rgba(8,10,12,.5) 30%,rgba(8,10,12,0) 52%)}
.ab2 .ab-in{position:relative;z-index:2;max-width:var(--ab-wrap);margin:0 auto;padding:0 var(--ab-gut)}
.ab2 .ab-band>.ab-top{min-height:var(--ab-ratio);padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(40px,4vw,64px)}
.ab2 .ab-col{max-width:min(31rem,42vw)}
.ab2 .ab-right .ab-col{margin-left:auto;max-width:min(31rem,38vw)}
.ab2 .ab-band h1,.ab2 .ab-band h2{color:var(--ab-ivory);font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.015em;margin-bottom:22px}
.ab2 .ab-band h1{font-size:clamp(44px,5vw,74px)}
.ab2 .ab-ivory h2{color:var(--ab-head-d)}
.ab2 .ab-ivory .ab-label{color:var(--ab-gold-d)}
.ab2 .ab-dark p{color:#e3ddd2}
.ab2 .ab-sub{font:italic 300 clamp(24px,2.4vw,34px)/1.2 var(--ab-serif)!important;color:var(--ab-gold)!important;margin:-6px 0 28px!important}
.ab2 .ab-pull{font:400 clamp(22px,2vw,27px)/1.38 var(--ab-serif)!important;color:var(--ab-ivory)!important;
  border-left:1px solid var(--ab-gold);padding-left:20px;margin:30px 0 30px!important}
.ab2 .ab-ivory .ab-pull{color:var(--ab-head-d)!important;border-left-color:var(--ab-gold-d)}
.ab2 .ab-hero{padding-top:0}
.ab2 .ab-hero>.ab-top{padding-top:calc(var(--ab-nav) + clamp(48px,6vw,96px))}
/* continuation below the image: two balanced columns, reading order kept */
.ab2 .ab-more{columns:2 22rem;column-gap:clamp(40px,5vw,88px);padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(72px,8vw,120px)}
.ab2 .ab-more p{break-inside:avoid}
.ab2 .ab-more .ab-pull{column-span:all;max-width:44rem;margin:14px 0 34px!important}
.ab2 .ab-band:not(:has(.ab-more))>.ab-in:first-of-type{padding-bottom:clamp(72px,8vw,120px)}
.ab2 .ab-dark+.ab-dark{border-top:1px solid rgba(201,160,60,.14)}

/* ── 05 · the founder's collection ── */
.ab2 .ab-collection{background:var(--ab-ivory-bg);color:var(--ab-body-d);overflow:hidden}
.ab2 .ab-coll-bg,.ab2 .ab-close-bg{position:absolute;inset:0;z-index:0}
.ab2 .ab-coll-bg img,.ab2 .ab-close-bg img{display:block;width:100%;height:100%;object-fit:cover}
.ab2 .ab-coll-bg img{object-position:50% 100%}
.ab2 .ab-coll-in{position:relative;z-index:1;max-width:var(--ab-wrap);margin:0 auto;padding:clamp(72px,7vw,110px) var(--ab-gut) clamp(56px,5vw,84px)}
.ab2 .ab-coll-head{text-align:center;max-width:44rem;margin:0 auto clamp(36px,4vw,56px)}
.ab2 .ab-coll-head .ab-label{color:var(--ab-gold-d)}
.ab2 .ab-coll-head .ab-label::after{margin:12px auto 0}
.ab2 .ab-collection h2{color:var(--ab-head-d);font-size:clamp(42px,4.6vw,66px);line-height:1;margin-bottom:16px}
.ab2 .ab-coll-sub{font-size:17px;color:var(--ab-body-d)}
.ab2 .ab-books{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:end;column-gap:clamp(18px,2.2vw,34px)}
.ab2 .ab-vol{display:contents}
.ab2 .ab-cover{display:block;width:clamp(220px,21vw,300px);height:auto;filter:drop-shadow(0 26px 26px rgba(60,40,15,.32)) drop-shadow(0 6px 8px rgba(60,40,15,.25))}
.ab2 .ab-vol--1 .ab-cover{grid-column:2;grid-row:1}
.ab2 .ab-vol--2 .ab-cover{grid-column:3;grid-row:1}
.ab2 .ab-vol-txt{grid-row:1;align-self:center;max-width:17rem}
.ab2 .ab-vol--1 .ab-vol-txt{grid-column:1;justify-self:end}
.ab2 .ab-vol--2 .ab-vol-txt{grid-column:4;justify-self:start}
.ab2 .ab-vol-txt .ab-label{color:var(--ab-gold-d);margin-bottom:10px}
.ab2 .ab-vol-txt .ab-label::after{display:none}
.ab2 .ab-vol-txt h3{color:var(--ab-head-d);font-size:clamp(28px,2.4vw,34px);line-height:1.1;margin-bottom:12px}
.ab2 .ab-vol-txt p{font-size:16px;line-height:1.65;color:var(--ab-body-d)}

/* ── 06 · closing invitation ── */
.ab2 .ab-closing{background:var(--ab-ink);overflow:hidden}
.ab2 .ab-close-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,12,.15),rgba(8,10,12,.35) 55%,rgba(8,10,12,.7))}
.ab2 .ab-close-bg img{object-position:50% 40%}
.ab2 .ab-close-in{position:relative;z-index:1;min-height:max(440px,var(--ab-ratio));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;padding:clamp(80px,8vw,120px) var(--ab-gut) clamp(64px,7vw,108px)}
.ab2 .ab-closing .ab-label::after{display:none}
.ab2 .ab-close-rule{display:block;width:44px;height:1px;background:var(--ab-gold);margin:0 auto 26px}
.ab2 .ab-closing h2{color:var(--ab-ivory);font-size:clamp(32px,3.6vw,52px);line-height:1.12;max-width:22ch}
.ab2 .ab-closing h2::after{content:"";display:block;width:64px;height:1px;background:var(--ab-gold);margin:30px auto 0}

/* ── tablet & phone: image as its own block, copy on its ground below ── */
@media (max-width:900px){
  .ab2 .ab-col,.ab2 .ab-right .ab-col{max-width:36rem;margin-left:0}
  .ab2 .ab-media{position:relative;inset:auto;height:auto;aspect-ratio:4/3}
  .ab2 .ab-media img{object-position:var(--ab-fx,50%) 50%}
  .ab2 .ab-media::before{display:none}
  .ab2 .ab-media::after{height:28%}
  .ab2 .ab-hero .ab-media{margin-top:var(--ab-nav)}
  .ab2 .ab-band>.ab-top,.ab2 .ab-hero>.ab-top{min-height:0;padding-top:8px;padding-bottom:8px}
  .ab2 .ab-band:not(:has(.ab-more))>.ab-in:first-of-type{padding-bottom:64px}
  .ab2 .ab-more{columns:1;padding-top:0;padding-bottom:72px;max-width:calc(36rem + 2 * var(--ab-gut));margin-left:0}
  .ab2 .ab-more .ab-pull{margin:22px 0 28px!important}
  .ab2 .ab-books{grid-template-columns:1fr;row-gap:56px;justify-items:center}
  .ab2 .ab-vol{display:flex;flex-direction:column;align-items:center;text-align:center}
  .ab2 .ab-vol .ab-cover,.ab2 .ab-vol .ab-vol-txt{grid-column:auto!important;grid-row:auto!important}
  .ab2 .ab-cover{width:min(62vw,300px);margin-bottom:28px}
  .ab2 .ab-vol-txt{justify-self:auto!important;max-width:30rem}
  .ab2 .ab-coll-bg img{object-position:50% 50%}
}
@media (max-width:520px){
  .ab2{font-size:16px}
  .ab2 .ab-band h1{font-size:40px}.ab2 .ab-band h2{font-size:36px}
  .ab2 .ab-media{aspect-ratio:5/4}
  .ab2 .ab-pull{font-size:22px!important}
}
/* About is the active nav item on this page */
.nav .navlinks a[aria-current="page"]{color:var(--gold-lt,#E8C9A0);box-shadow:inset 0 -1px 0 var(--gold,#B08D57)}
@media (max-width:760px){.ab2{--ab-nav:65px}}
/* tighten the hand-off from the image to its continuation */
.ab2 .ab-band:has(.ab-more)>.ab-top{padding-bottom:clamp(20px,2vw,32px)}
.ab2 .ab-band>.ab-more{padding-top:clamp(8px,1vw,16px)}
@media (max-width:900px){.ab2 .ab-band:has(.ab-more)>.ab-top{padding-bottom:0}}
/* phone/tablet collection: keep the palm-shadowed wall behind the heading only, so no copy sits on the stone */
@media (max-width:900px){
  .ab2 .ab-coll-bg{bottom:auto;height:min(560px,70vw + 240px);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .ab2 .ab-coll-bg img{object-position:20% 0}
}
/* volume copy sits beside the upper covers, clear of the stone ledge */
@media (min-width:901px){.ab2 .ab-vol-txt{align-self:start;padding-top:8px}}
@media (min-width:901px) and (max-width:1199px){.ab2 .ab-vol-txt p{font-size:15px;line-height:1.55}.ab2 .ab-coll-in{padding-bottom:84px}}
@media (min-width:901px) and (max-width:1199px){.ab2 .ab-coll-in{padding-bottom:56px}
  .ab2 .ab-vol-txt{padding:10px 14px 14px;border-radius:10px;background:radial-gradient(ellipse at 50% 45%,rgba(239,230,215,.92) 55%,rgba(239,230,215,0) 100%)}}

/* ── mock-up layout (26 Oct, founder correction): each section is one image
   band at the image's own ratio, copy set inside it, nothing continuing below ── */
@media (min-width:901px){
  .ab2 .ab-media{inset:0;height:auto}
  .ab2 .ab-media img{object-position:var(--ab-fx,50%) 50%}
  .ab2 .ab-media::after{display:none}
  .ab2 .ab-band{min-height:var(--ab-ratio);display:flex;align-items:center}
  .ab2 .ab-band>.ab-top{width:100%;min-height:0;padding-top:clamp(56px,5vw,84px);padding-bottom:clamp(56px,5vw,84px)}
  .ab2 .ab-hero{min-height:max(var(--ab-ratio),600px)}
  .ab2 .ab-hero>.ab-top{padding-top:calc(var(--ab-nav) + clamp(40px,4vw,72px))}
  .ab2 .ab-band:not(:has(.ab-more))>.ab-top{padding-bottom:clamp(56px,5vw,84px)}
  .ab2 .ab-ivory .ab-col{max-width:min(31rem,36vw);margin-left:auto;margin-right:clamp(0px,2vw,40px)}
}
.ab2 .ab-band h1 em,.ab2 .ab-band h2 em{display:block;font-style:normal;color:var(--ab-gold)}
.ab2 .ab-ivory h2 em{color:var(--ab-head-d)}
.ab2 .ab-band h1{max-width:9.5ch}
.ab2 .ab-dark+.ab-dark{border-top:0}
/* 03: couple and skyline hold the left; the copy sits on the warm wall,
   continued as a matching panel so it never runs over the skyline */
@media (min-width:901px){
  .ab2 .ab-ivory{background:linear-gradient(180deg,#f4d6b2 0%,#ead0b4 45%,#e2c3a2 100%)}
  .ab2 .ab-ivory .ab-media{right:auto;width:60%;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .ab2 .ab-ivory .ab-media img{object-position:0 50%}
  .ab2 .ab-ivory .ab-col{max-width:min(30rem,34vw);margin-right:0}
  .ab2 .ab-ivory h2{font-size:clamp(36px,3.6vw,56px)}
  .ab2 .ab-ivory p{font-size:16px}
}
.ab2 .ab-band h1{max-width:12ch}