/* ============================================================
   Padel54 — About page
   (loaded after style.css, which provides tokens, nav, btn,
    reveal and footer)
   ============================================================ */

/* ---------- hero: centred headline over a faint 54°N ---------- */
.ab-hero{position:relative;overflow:hidden;text-align:center;padding-top:clamp(140px,20vh,220px);padding-bottom:clamp(56px,7vw,110px)}
.ab-hero-in{position:relative;z-index:2}
.ab-hero .lab{color:var(--signal);margin-bottom:20px}
.ab-hero h1{margin:0 auto;font-weight:900;text-transform:uppercase;font-size:clamp(46px,9.4vw,150px);line-height:.88;letter-spacing:-.035em;max-width:11ch}
.ab-hero h1 .s{color:var(--signal)}
.ab-lead{margin:30px auto 0;max-width:54ch;color:#cdccc7;font-size:clamp(14px,1.3vw,18px);line-height:1.55}
.ab-big{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-weight:900;font-size:clamp(170px,34vw,560px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(213,239,101,.22);z-index:1;pointer-events:none;white-space:nowrap}

/* ---------- facts ---------- */
.ab-facts .u{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;padding-top:clamp(50px,6vw,80px);padding-bottom:clamp(60px,7vw,100px)}
.ab-fact .n{font-weight:900;font-size:clamp(34px,4vw,58px);letter-spacing:-.02em;line-height:.9;color:var(--signal)}
.ab-fact .t{margin:10px auto 0;color:var(--paper-dim);font-size:13.5px;max-width:28ch}
@media(max-width:680px){.ab-facts .u{grid-template-columns:1fr;gap:26px}}

/* ---------- chapters: big centred statements ---------- */
.ab-row{display:grid;justify-items:center;text-align:center;gap:18px;padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.ab-side{display:flex;align-items:baseline;gap:12px}
.ab-no{font-weight:900;font-size:16px;letter-spacing:.1em;color:var(--signal)}
.ab-tl{font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--paper-dim)}
.ab-main h2{margin:0 auto;font-weight:900;text-transform:uppercase;font-size:clamp(36px,6.4vw,100px);line-height:.92;letter-spacing:-.025em;max-width:13ch}
.ab-main p{margin:20px auto 0;max-width:56ch;color:#cdccc7;font-size:clamp(14px,1.2vw,17px);line-height:1.6}
.ab-main h2 + p{margin-top:28px}
.ab-main a{color:inherit;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px;text-decoration-thickness:2px}

/* ---------- quote card ---------- */
.ab-quote{max-width:1480px;margin:0 auto;padding:clamp(40px,6vw,90px) var(--mx)}
.ab-quote .u{background:var(--ink-3);border-radius:4px;padding:clamp(40px,7vw,110px) clamp(24px,6vw,100px);text-align:center}
.ab-quote blockquote{margin:0 auto;color:var(--signal);font-weight:900;text-transform:uppercase;font-size:clamp(34px,6.4vw,104px);line-height:.9;letter-spacing:-.03em;max-width:15ch}
.ab-cap{margin-top:26px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px}
.ab-after{margin:34px auto 0;max-width:52ch;font-size:clamp(14px,1.2vw,17px);line-height:1.6;color:#cdccc7}

/* ---------- photos ---------- */
.ab-photo{max-width:1480px;margin:0 auto;padding:0 var(--mx)}
.ab-photo img{display:block;width:100%;height:clamp(280px,52vh,540px);object-fit:cover;object-position:50% 70%;border-radius:4px}
.ab-photo-2 img{object-position:50% 30%}

/* ---------- close ---------- */
.ab-close{text-align:center;padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(90px,11vw,160px)}
.ab-close h2{font-weight:900;text-transform:uppercase;font-size:clamp(34px,6vw,96px);line-height:.9;letter-spacing:-.03em;max-width:14ch;margin:0 auto}
.ab-cta{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}