/* ═══════════════════════════════════════════════════════════════════
   DrK · The Way of Heaven — ABOUT PAGE
   Page rules ONLY. Tokens, base, nav, rule, section-label, newsletter and
   footer live in the installed stylesheets — nothing here redefines them.
   Every selector is scoped under #woh-about.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Head: label → title → rule, centred. 103px = 87px fixed nav + 16px. ── */
#woh-about .about-head{padding:103px var(--gutter) 0;display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
#woh-about .about-title{margin:0;max-width:16em;font-family:var(--font-heading);font-weight:var(--w-thin);font-size:clamp(26px,3.5vw,46px);letter-spacing:.14em;line-height:var(--lh-display);text-transform:uppercase;color:var(--text-heading);text-wrap:balance}
#woh-about .about-head .rule{width:min(620px,90vw)}

/* ── Reading voice (same as the homepage founder bio) ── */
#woh-about .about-copy p,#woh-about .about-close p{margin:0;font-family:var(--font-ui);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:.012em;color:rgba(237,227,210,.648);text-wrap:pretty}

/* ── Portrait + first three paragraphs. Vertical padding is 60% of a section. ── */
#woh-about .about-body{padding-top:calc(var(--section-pad-y) * .6 + 48px);padding-bottom:calc(var(--section-pad-y) * .6)}
#woh-about .about-row{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start;width:90%;margin-inline:auto}
#woh-about .about-portrait{flex:0 1 300px;min-width:0;max-width:100%;background:radial-gradient(ellipse 60% 55% at 52% 46%,#100F0D 0%,#0A0908 42%,rgba(4,4,4,0) 76%)}
/* Portrait sits flush with the top of the copy (owner request 2026-09-26): the box
   takes the image's own height, so object-fit:contain no longer centres it inside
   a taller frame and leaves empty space above it. */
#woh-about .portrait{height:auto}
#woh-about .portrait img{filter:none;height:auto;object-position:top center}
#woh-about .about-copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:26px}

/* ── The rest of the story: no top or bottom padding, on purpose. ── */
#woh-about .about-close{padding:0 var(--gutter)}
#woh-about .about-close-col{width:min(760px,90%);margin-inline:auto;display:flex;flex-direction:column;gap:26px}

/* ── Credentials ── */
#woh-about .about-facts-col{width:min(1000px,92%);margin-inline:auto;display:flex;flex-direction:column;gap:56px}
/* 48px added above and below the rule under the closing paragraph (owner request 2026-09-26). */
#woh-about .about-facts{padding-top:calc(var(--section-pad-y) + 48px)}
#woh-about .about-facts-rule{display:flex;justify-content:center;margin-bottom:48px}
#woh-about .about-facts-rule .rule{width:min(620px,100%)}
#woh-about .about-group{display:flex;flex-direction:column;gap:20px}
/* Gold margin rule on each credentials group, the same line as the homepage founder
   block (site.css §13), owner request 2026-09-26. */
#woh-about .about-group{position:relative;padding-left:clamp(20px,2.6vw,34px)}
#woh-about .about-group::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(210,174,133,0) 0%,rgba(210,174,133,.32) 10%,rgba(210,174,133,.55) 50%,rgba(210,174,133,.32) 90%,rgba(210,174,133,0) 100%)}
#woh-about .about-group .section-label{margin:0;font-size:calc(var(--fs-caps) * 1.7)}
/* In-page link target from the martial-arts sentence: clears the 87px fixed header. */
#woh-about #martial-arts{scroll-margin-top:120px}
/* Vertical hairline between items. The clip + negative margin hides the
   divider on the first item of every wrapped row — do not remove either. */
#woh-about .about-list-clip{overflow:hidden}
#woh-about .about-list{list-style:none;margin:0 0 0 -21px;padding:0;display:flex;flex-wrap:wrap}
#woh-about .about-list li{display:inline-flex;align-items:center;margin:6px 0;padding:4px 20px;border-left:1px solid var(--line-hair);font-family:var(--font-ui);font-weight:400;font-size:var(--fs-body-sm);letter-spacing:.012em;line-height:1.45;color:var(--text-dim)}

/* Stack before the flex bases force a wrap (300 + 380 + 64 = 744px row ≈ 827px viewport). */
@media (max-width:880px){
#woh-about .about-row{flex-direction:column;gap:56px}
#woh-about .about-portrait{width:min(88%,420px);margin-inline:auto}
/* Stacked layout (phones, small tablets): the portrait follows the third
   paragraph instead of leading the page (owner request 2026-09-26). */
#woh-about .about-portrait{order:2}
}