/* ============================================================================
   ZARYA · About page · V28.73 consolidated stylesheet
   ----------------------------------------------------------------------------
   Replaces: about.css (chapter rules), about-v20, about-v21-approved,
   about-chapter03-native-v2860, about-mobile-native-v2860, about-v2856-founders-
   landing, zarya-typography-v2872-t1/t2, zarya-responsive-v2872-t4,
   about-visual-restoration-t6, about-visual-precision-t7, about-unified-typography-t9,
   about-full-artwork-t10, about-original-restoration-t11 and the inline V28.72 block.
   Shared infrastructure that stays: shell.css, site.css, zarya-journey.css (tabs and
   Previous/Next), zarya-typography-system-v2855.css (eyebrow token), zarya-v2413-fixes.css.

   Method (why this cannot overlap again)
   - Each artwork is text-free and is drawn at its own native aspect ratio, never cropped,
     never faded, never masked. The art IS the stage.
   - Live text is placed inside a safe text zone measured from the artwork (left of the
     first arch line), and every size inside it is in container units (cqw), so text and
     art scale together at every width. There is no px font floor that can outgrow the zone.
   - Below 960px of stage width the stage stops being a stage: copy first, whole image below.
   - No !important is used in this file. Specificity comes from the .ab-* namespace.
   ========================================================================== */

body.about{
  --ab-ink:#081424;           /* headline */
  --ab-muted:#5b6a7e;         /* supporting text */
  --ab-eyebrow:#855615;       /* eyebrow (enforced by zarya-typography-system-v2855) */
  --ab-line:rgba(12,30,49,.075);
  --ab-paper:#fffefa;
  --ab-font:"Inter ZARYA",Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
}

/* ---------- shared type roles (used by hero and all four chapters) ---------- */
.ab-title{margin:0;font-family:var(--ab-font);font-weight:760;letter-spacing:-.036em;line-height:1.08;color:var(--ab-ink);text-wrap:wrap}
.ab-lead{margin:0;font-family:var(--ab-font);font-weight:400;line-height:1.55;letter-spacing:0;color:var(--ab-muted)}
.ab-strong{margin:0;font-family:var(--ab-font);font-weight:700;line-height:1.35;letter-spacing:-.012em;color:var(--ab-ink)}
.ab-copy .eyebrow{margin:0}
.ab-copy p,.ab-copy h2,.ab-copy h1{max-width:none}

/* ======================================================================
   HERO · The founders
   ====================================================================== */
.ab-hero{background:#fdfcfb;overflow:hidden}
.ab-hero__stage{position:relative;display:flex;flex-direction:column;max-width:1800px;margin:0 auto;container-type:inline-size;container-name:abhero}
.ab-hero__art{display:block;order:2}
.ab-hero__art img{display:block;width:100%;height:auto}
.ab-hero .ab-hero__copy{order:1;padding:clamp(34px,8vw,56px) clamp(22px,6vw,48px) clamp(24px,5vw,34px)}
.ab-hero .ab-hero__copy .eyebrow{margin:0 0 18px}
.ab-hero__title{font-size:clamp(30px,9.2vw,52px);margin:0 0 20px}
.ab-hero__title .ab-line{display:block;white-space:nowrap}
.ab-hero__sub{margin:0 0 16px;font-size:clamp(19px,5vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ab-ink)}
.ab-hero__lede{margin:0 0 26px;max-width:34em;font-size:clamp(16px,4.2vw,19px)}
.ab-cta{display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:55px;padding:0 26px;border:0;border-radius:15px;background:#081321;color:#fff;font:inherit;font-size:16px;font-weight:650;letter-spacing:0;cursor:pointer;text-decoration:none;transition:background .2s}
.ab-cta:hover{background:#12263d}
.ab-cta:focus-visible{outline:3px solid #855615;outline-offset:3px}
.ab-cta span{font-weight:500}
.ab-credit{order:3;display:flex;flex-direction:column;gap:3px;margin:clamp(16px,4vw,24px) clamp(22px,6vw,48px) clamp(28px,6vw,40px);padding:12px 18px 13px 16px;width:max-content;max-width:calc(100% - 2*clamp(22px,6vw,48px));border:1px solid #ebe4da;border-left:3px solid #be7a1b;border-radius:12px;background:#fffdf8;box-shadow:0 10px 26px rgba(17,24,33,.07);line-height:1.3}
.ab-credit__kicker{font-size:11px;font-weight:750;letter-spacing:.16em;color:var(--ab-eyebrow)}
.ab-credit strong{font-size:17px;font-weight:750;letter-spacing:-.018em;color:var(--ab-ink)}
.ab-credit__role{font-size:14px;font-weight:500;color:var(--ab-muted)}

@media (min-width:960px){
  .ab-hero__stage{display:block;aspect-ratio:1672/941}
  .ab-hero__art,.ab-hero__art img{position:absolute;inset:0;width:100%;height:100%}
  .ab-hero .ab-hero__copy{position:absolute;z-index:2;left:5.3%;top:0;bottom:1%;width:30%;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .ab-hero .ab-hero__copy .eyebrow{margin:0 0 2.1cqw}
  .ab-hero__title{font-size:clamp(30px,3.9cqw,68px);margin:0 0 1.9cqw}
  .ab-hero__sub{font-size:clamp(17px,1.75cqw,30px);margin:0 0 1.15cqw}
  .ab-hero__lede{font-size:clamp(14px,1.3cqw,20px);margin:0 0 2.3cqw;max-width:none}
  .ab-cta{height:clamp(44px,3.7cqw,56px);padding:0 clamp(20px,1.9cqw,28px);border-radius:clamp(11px,1cqw,15px);font-size:clamp(14px,1.1cqw,17px)}
  /* founder caption: one live card over the area the original card occupied */
  .ab-credit{position:absolute;z-index:3;order:0;left:67.8%;top:73.75%;width:29.55%;max-width:none;height:16.15%;margin:0;padding:0 1.5cqw 0 1.7cqw;justify-content:center;gap:.35cqw;border-radius:clamp(10px,1.1cqw,16px);border-left-width:0;border-color:#efe8dd;background:#fffdf8;box-shadow:0 .8cqw 2.2cqw rgba(17,24,33,.12)}
  .ab-credit::before{content:"";position:absolute;left:1.05cqw;top:22%;bottom:22%;width:2px;border-radius:2px;background:#be7a1b}
  .ab-credit>*{margin-left:.9cqw}
  .ab-credit__kicker{font-size:clamp(9px,.78cqw,12px)}
  .ab-credit strong{font-size:clamp(13px,1.38cqw,21px)}
  .ab-credit__role{font-size:clamp(11px,1cqw,15px)}
}

/* ======================================================================
   CHAPTERS 01 to 04
   ====================================================================== */
.ab-chapter{max-width:1440px;margin:0 auto;padding:clamp(16px,2.4vw,32px) clamp(16px,2.4vw,32px) 0;container-type:inline-size;container-name:abch;scroll-margin-top:calc(var(--header-h,64px) + 130px)}
.ab-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--ab-line);border-radius:24px;overflow:hidden;background:var(--ab-paper);box-shadow:0 12px 48px rgba(20,31,47,.045);container-type:inline-size}
.ab-art{display:block;position:relative;z-index:0;order:2;width:100%;height:auto;aspect-ratio:var(--ab-ratio)}
.ab-card .ab-copy{order:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,6vw,44px) clamp(22px,6vw,48px) clamp(24px,5vw,36px)}
.ab-card .ab-copy .eyebrow{margin:0 0 18px}
.ab-title--ch{font-size:clamp(30px,8vw,48px);margin:0 0 18px}
.ab-title--ch .ab-line{display:block}
.ab-card .ab-lead{font-size:clamp(17px,4.4vw,19px);max-width:34em;margin:0}
.ab-card .ab-lead--stack{margin:0 0 18px}
.ab-strong{font-size:clamp(17px,4.6vw,20px);margin:20px 0 0;max-width:30em}
.ab-founders{margin:26px 0 0;padding:20px 0 0;border-top:1px solid #e3ddd2;display:flex;flex-direction:column;gap:5px;max-width:30em}
.ab-founders__kicker{font-size:11px;font-weight:750;letter-spacing:.18em;color:var(--ab-eyebrow)}
.ab-founders strong{font-size:clamp(17px,4.6vw,21px);font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ab-ink)}
.ab-founders span:last-child{font-size:15px;font-weight:450;color:var(--ab-muted)}

/* per-artwork geometry: ratio of the exported art, left edge and width of the safe text zone.
   The zone ends before the first arch/hairline measured in each image (see ABOUT_RESTORATION_REPORT). */
#chapter-01{--ab-ratio:1598/767;--ab-x:4.6%;--ab-w:26.4%}
#chapter-02{--ab-ratio:1462/784;--ab-x:3.9%;--ab-w:24.0%}
#chapter-03{--ab-ratio:1569/773;--ab-x:4.6%;--ab-w:27.0%}
#chapter-04{--ab-ratio:1458/780;--ab-x:4.8%;--ab-w:25.6%}

/* mobile only: trim the blank left margin of the art (no arch line lives there) */
@media (max-width:599px){
  .ab-art{aspect-ratio:auto;object-fit:cover;object-position:100% 50%;height:calc((100cqw) * 767 / (1598 * 0.86))}
  #chapter-02 .ab-art{height:calc(100cqw * 784 / (1462 * 0.86))}
  #chapter-03 .ab-art{height:calc(100cqw * 773 / (1569 * 0.86))}
  #chapter-04 .ab-art{height:calc(100cqw * 780 / (1458 * 0.86))}
}

/* stage mode */
@container abch (min-width:960px){
  .ab-card{display:block;aspect-ratio:var(--ab-ratio)}
  .ab-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:fill;object-position:50% 50%}
  .ab-card .ab-copy{position:absolute;z-index:1;left:var(--ab-x);top:0;bottom:3%;width:var(--ab-w);padding:0;justify-content:center}
  .ab-card .ab-copy .eyebrow{margin:0 0 2.2cqw}
  .ab-title--ch{font-size:clamp(28px,3cqw,56px);margin:0 0 2cqw}
  .ab-title--ch .ab-line{white-space:nowrap}
  .ab-card .ab-lead{font-size:clamp(14px,1.3cqw,20px);max-width:none}
  .ab-card .ab-lead--stack{margin:0 0 1.5cqw;font-size:clamp(15px,1.6cqw,24px);line-height:1.45}
  .ab-strong{font-size:clamp(14px,1.42cqw,22px);margin:1.7cqw 0 0;max-width:none}
  .ab-founders{margin:2.2cqw 0 0;padding:1.5cqw 0 0;max-width:none}
  .ab-founders__kicker{font-size:clamp(10px,.8cqw,12px)}
  .ab-founders strong{font-size:clamp(14px,1.45cqw,22px)}
  .ab-founders span:last-child{font-size:clamp(12px,1.05cqw,16px)}
}

/* ---------- closing call to action under chapter 04 ---------- */
.ab-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:26px 4px 0;margin-bottom:32px}
.ab-next p{margin:0;flex:1 1 280px;font-size:clamp(17px,1.4vw,20px);font-weight:650;letter-spacing:-.015em;color:var(--ab-ink)}
.ab-next .zs-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:#081424;color:#fff;text-decoration:none;font-weight:650}
.ab-next .zs-btn:focus-visible,.ab-next__contact:focus-visible{outline:3px solid #855615;outline-offset:3px}
.ab-next__contact{color:var(--ab-ink);font-weight:600;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){.ab-cta{transition:none}}

/* V28.75 targeted quality corrections: chapter-02 four balanced lines and
   chapter-03 supporting copy aligned to chapter body scale. */
.ab-title--connection .ab-line{display:block;}
.ab-card .ab-lead.ab-lead--stack{font-size:clamp(17px,4.4vw,19px);line-height:1.55;}
@container abch (min-width:960px){
  .ab-card .ab-lead.ab-lead--stack{font-size:clamp(14px,1.3cqw,20px);line-height:1.55;}
  #chapter-02 .ab-title--connection{font-size:clamp(27px,2.85cqw,48px);}
}