/* §6 narrative — segmented length control; the story reflows from display type to body copy */
.cbf-nar__desk{display:flex;flex-direction:column;gap:22px}
.cbf-nar__ctrl{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.cbf-nar__cl{margin:0}
.cbf-nar__seg{--i:1;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line-3);min-width:min(100%,420px)}
.cbf-nar__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:var(--r-pill);background:var(--ink);transform:translateX(calc(var(--i) * 100%));transition:transform .55s var(--e)}
.cbf-nar__tab{position:relative;z-index:1;appearance:none;background:none;border:0;cursor:pointer;height:44px;padding:0 14px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);transition:color .35s var(--e)}
.cbf-nar__tab b{font-family:var(--f);font-weight:500;font-size:.875rem;letter-spacing:-.01em}
.cbf-nar__tab span{font-size:var(--t-xs);font-weight:500}
.cbf-nar__tab:hover{color:var(--ink)}
.cbf-nar__tab[aria-selected="true"]{color:var(--on-ink)}

.cbf-nar__page{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.3fr);background:var(--paper);border:1px solid var(--line-3);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.cbf-nar__stage{position:relative;padding:clamp(28px,4.4vw,72px);display:flex;flex-direction:column;justify-content:flex-start;transition:height .6s var(--e);box-sizing:border-box;min-width:0}
.cbf-nar__pane{outline-offset:6px}
.cbf-nar__pane p{margin:0;max-width:var(--cbf-measure)}
.cbf-nar__pane p+p{margin-top:1em}
.cbf-nar__pane--10 p{font-family:var(--f-h);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1.08;letter-spacing:-.035em;color:var(--ink);max-width:18ch}
.cbf-nar__pane--50 p{font-family:var(--f-h);font-weight:500;font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.4;letter-spacing:-.018em;color:var(--txt);max-width:40ch}
.cbf-nar__pane--250{columns:2 300px;column-gap:clamp(28px,3.4vw,52px)}
.cbf-nar__pane--250 p{font-size:clamp(.95rem,1.05vw,1.02rem);line-height:1.78;color:var(--txt);break-inside:avoid-column}
.cbf-nar__core{background:none;color:var(--ink);box-shadow:inset 0 -.42em 0 var(--blue-wash-2);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cbf-nar__pane.is-flow p{animation:cbfFlow .65s var(--e) both}
.cbf-nar__pane.is-flow p:nth-child(2){animation-delay:.07s}.cbf-nar__pane.is-flow p:nth-child(3){animation-delay:.14s}
.cbf-nar__pane.is-flow p:nth-child(4){animation-delay:.21s}.cbf-nar__pane.is-flow p:nth-child(5){animation-delay:.28s}
@keyframes cbfFlow{from{opacity:0;transform:translateY(10px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}

.cbf-nar__read{margin:0;padding:clamp(24px,3vw,44px) clamp(20px,2.6vw,36px);border-left:1px solid var(--line);background:var(--paper-2);display:flex;flex-direction:column;gap:22px}
.cbf-nar__read div{display:flex;flex-direction:column;gap:6px}
.cbf-nar__read dt{font-family:var(--f);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cbf-nar__read dd{margin:0;font-size:var(--t-sm);font-weight:500;color:var(--ink);line-height:1.45}
.cbf-nar__read dd[data-nar="words"],.cbf-nar__read dd[data-nar="secs"]{font-family:var(--f);font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.cbf-nar__key{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.cbf-nar__key dt{text-transform:none;letter-spacing:0;font-family:var(--f-b);font-size:var(--t-sm);color:var(--ink)}
.cbf-nar__key dd{font-weight:400;color:var(--muted)}

@media (max-width:1024px){
  .cbf-nar__page{grid-template-columns:minmax(0,1fr)}
  .cbf-nar__read{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cbf-nar__key{grid-column:1 / -1;margin-top:0}
}
@media (max-width:600px){
  .cbf-nar__seg{width:100%;min-width:0}
  .cbf-nar__tab{padding:0 6px;flex-direction:column;gap:0;height:52px}
  .cbf-nar__read{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbf-nar__read div:nth-child(3){grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.cbf-nar__thumb,.cbf-nar__stage{transition:none}.cbf-nar__pane.is-flow p{animation:none}}