/* Stage 7D.5 P1 — one pinned visual field, a quiet subtitle, minimal persistent UI. Portfolio tokens only. */
.ce { margin-top: var(--s7); }
.ce-chain { display: grid; gap: var(--s7); margin: 0; padding: 0; list-style: none; }
.ce-lead { color: var(--muted); font-size: .9375rem; max-width: 44rem; }
.ce-step { display: grid; gap: var(--s3) var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.ce-step .ce-kind { color: var(--accent); }
.ce-step .ce-text { font-size: .9375rem; color: var(--muted); line-height: 1.55; max-width: 36rem; }
.ce-step .ce-eq { font: 400 clamp(1.375rem, 2.4vw, 1.875rem)/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.ce-step[data-kind="Decision"] .ce-text { font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.ce-step figure { margin: 0; }
.ce-step svg { display: block; width: 100%; height: auto; }
.ce-step .ce-n { display: none; }
@media (min-width: 880px) { .ce-step { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .ce-step figure { grid-column: 2; grid-row: 1 / span 4; } }
@media (max-width: 699px) { .ce-step .ce-w { display: none; } .ce-step .ce-n { display: block; } }

.ce.is-motion { position: relative; }
.ce.is-motion .ce-chain, .ce.is-motion .ce-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ce-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) 7rem; padding-block: var(--s6) var(--s4); }
.ce-tag { position: absolute; top: var(--s4); left: 0; margin: 0; }
.ce-fig { min-height: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%); }  /* r2: a soft frame edge — leaving parts exit like a film gate, not a hard crop */
.ce-fig svg { display: block; width: 100%; height: 100%; }
/* Subtitle: fixed height, fixed position — the text changes, nothing moves. */
.ce-sub { height: 7rem; overflow: hidden; border-top: 1px solid var(--rule); padding-top: var(--s3); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s1); max-width: 54rem; }
.ce-sub .ce-stmt { margin: 0; font-size: .9375rem; color: var(--muted); line-height: 1.45; }
.ce-sub .ce-eq { margin: 0; font: 400 1.375rem/1.25 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.ce-sub .ce-eq .rhs { color: var(--accent); }
.ce-sub .ce-note { margin: 0; font-size: .8125rem; color: var(--muted); line-height: 1.4; }
.ce-sub[data-kind="Decision"] .ce-stmt { font-weight: 600; color: var(--accent); letter-spacing: .02em; }
@media (max-width: 879px) {
  .ce-stage { grid-template-rows: minmax(0, 1fr) 9.5rem; padding-block: var(--s6) var(--s3); }
  .ce-sub { height: 9.5rem; }
  .ce-sub .ce-stmt { white-space: normal; font-size: .875rem; }
  .ce-sub .ce-eq { font-size: 1.25rem; }
}