/* ============================================================
   ob-about.css — About-page-specific layout.
   Loads AFTER the shared ob-home.css (same tokens, chrome, and
   components). Only the narrative column, the "What we're not"
   band paragraph, and the "rule" statement are new here.
   ============================================================ */

/* The About headline is a full sentence — a touch more width than the home 17ch */
.hero h1{max-width:21ch}

/* ---------- Narrative (editorial reading column) ---------- */
.narrative{padding:clamp(56px,8vw,104px) var(--pad);border-bottom:1px solid var(--line)}
.prose{max-width:720px;margin:0 auto}
.prose p{color:var(--muted);font-size:clamp(16px,1.55vw,19px);line-height:1.7}
.prose p + p{margin-top:1.4em}
.prose b,.prose strong{color:var(--text);font-weight:600}

/* ---------- "What we're not" — reuse .positioning shell, paragraph treatment ---------- */
.band-copy{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,2.5vw,30px);line-height:1.4;letter-spacing:-.01em;color:var(--text);
}
.band-copy .dim{color:var(--muted)}
.band-copy .hold{color:var(--text);font-weight:600;border-bottom:2px solid var(--accent)}

/* ---------- The rule — large typographic statement ---------- */
.rule{position:relative;overflow:hidden;
  padding:clamp(72px,12vw,156px) var(--pad);border-bottom:1px solid var(--line)}
.rule__glow{position:absolute;left:-8%;top:50%;transform:translateY(-50%);
  width:60vw;height:46vw;max-width:760px;max-height:560px;pointer-events:none;
  background:radial-gradient(circle at center,rgba(124,92,255,.13),transparent 62%);filter:blur(10px)}
.rule__inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.rule__statement{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(40px,8.5vw,94px);line-height:1.0;letter-spacing:-.035em;
  display:flex;flex-direction:column;gap:.04em;
}
.rule__line{color:var(--text)}
.rule__line--accent{color:var(--accent)}
.rule__sub{color:var(--muted);font-size:clamp(15px,1.7vw,19px);line-height:1.6;
  max-width:52ch;margin-top:clamp(26px,3.4vw,40px)}

@media (max-width:620px){
  .hero h1{max-width:none}
}