/* ==========================================================
   KJRE PRODUCTION SYSTEM  |  Component layer: About and Doula V1.1
   Extracted verbatim from about-parts.html (LOCKED). DO NOT EDIT BY HAND.
   01-tokens.css + 02-system.css concatenate byte-for-byte to
   the Homepage V2 style block. A build check asserts this.
   ========================================================== */
/* ---------- the approach: sticky index rail + editorial entries ---------- */
.appr{display:grid;grid-template-columns:minmax(0,.33fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.rail{position:sticky;top:calc(110px + env(safe-area-inset-top,0px));display:flex;flex-direction:column}
.rail__k{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.5em}
.rail a{display:grid;grid-template-columns:auto 1fr;gap:.95em;align-items:baseline;padding-block:.6em;font-size:.82rem;font-weight:300;line-height:1.35;color:var(--ink-3);border-top:1px solid var(--rule-soft);transition:color .35s var(--ease)}
.rail a:last-of-type{border-bottom:1px solid var(--rule-soft)}
.rail a .no{font-size:.58rem;letter-spacing:.1em;color:var(--ink-3);opacity:.6}
.rail a:hover{color:var(--ink)}
.rail a.is-on{color:var(--ink)}
.rail a.is-on .no{color:var(--brass);opacity:1}

.movement{padding-top:clamp(28px,3.6vw,48px)}
.movement:first-child{padding-top:0}
.movement__k{display:flex;align-items:baseline;gap:1em;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--canopy);margin:0 0 .4em}
.movement__k .ln{flex:1;height:1px;background:var(--rule)}

.prins{display:flex;flex-direction:column}
.prin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.2vw,34px);padding-block:clamp(24px,3.2vw,42px);border-top:1px solid var(--rule)}
.prin:last-child{border-bottom:1px solid var(--rule)}
.prin__no{font-family:var(--kjre-display);font-size:.92rem;color:var(--brass);letter-spacing:.1em;padding-top:.5em}
.prin h3{font-family:var(--kjre-display);font-size:clamp(1.18rem,1.85vw,1.55rem);line-height:1.18;margin:0 0 .65em;font-weight:400}
.prin p{font-size:.95rem;font-weight:300;color:var(--ink-2);max-width:58ch}
.prin p + p{margin-top:.9em}
.prin__ex{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px);margin-top:1.5em;padding-top:1.35em;border-top:1px solid var(--rule-soft)}
.prin__ex .k{display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7em}
.prin__ex p{font-size:.86rem}

/* one pull statement, used once */
.pull{margin-top:1.6em;padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px);background:var(--paper-2);border-left:1px solid var(--brass)}
.pull p{font-family:var(--quote);font-style:italic;font-weight:300;font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.32;color:var(--ink);max-width:40ch}

/* ---------- the thread: one full-width statement ---------- */
.stmt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:end}
.stmt__big{font-family:var(--kjre-display);font-size:clamp(1.95rem,4.2vw,3.5rem);line-height:1.05;letter-spacing:-.012em;margin:0;text-wrap:balance}

/* ---------- tagline split ---------- */
.tag2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px)}
.tag2 section{display:flex;flex-direction:column;gap:1em;padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--rule)}
.tag2 h3{font-family:var(--kjre-display);font-size:clamp(1.3rem,2.2vw,1.8rem);margin:0;font-weight:400;line-height:1.14}
.tag2 p{font-size:.95rem;font-weight:300;color:var(--ink-2);max-width:52ch}

/* current page marker is inherited from the seller component layer */

@media (max-width:1080px){
  .appr{grid-template-columns:1fr;gap:26px}
  .rail{position:static;top:auto}
  .rail a{font-size:.86rem}
  .stmt{grid-template-columns:1fr;gap:24px;align-items:start}
  .tag2{grid-template-columns:1fr}
}
@media (max-width:620px){
  .prin__ex{grid-template-columns:1fr}
  .prin{grid-template-columns:1fr;gap:10px}
  .prin__no{padding-top:0}
}