/* ==========================================================================
   Reels 05 + 06 — the Oral Arts pair. Loaded after resources.css on two pages only:
     body.oa.oa-case  /resources/oral-arts-content-strategy-case-study/   (the case study: the bridge from expertise to engagement)
     body.oa.oa-lead  /resources/social-media-lead-engagement/            (the method: one follower record that fills chapter by chapter)
   Every rule is scoped to body.oa or an .oa- class. Default CSS = the final, complete, visible state.
   One-shot pre-states exist only as  @media (prefers-reduced-motion: no-preference) { html.ready .x:not(.in) … }
   (pages.js adds .in to [data-io]). Words never hide (text may dim to .35); nothing loops.
   Figures are decorative (aria-hidden): the article text and the real tables carry every fact.
   Colour meanings: teal = the path being built / confirmed · blue #3478D4 = observed, not yet confirmed. No gold here.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens + helpers */
.oa { --oa-lab: 500 max(.7rem, 11px)/1.4 var(--mono); --oa-blue: #3478D4; --oa-panel: rgba(15, 18, 23, .97); --oa-dim: rgba(244, 243, 239, .17); }
.oa [hidden] { display: none !important; }
.oa-lab { display: block; max-width: none; font: var(--oa-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.oa-lab.is-t { color: var(--accent-t); }
.oa .res-card { min-height: clamp(220px, 28vh, 310px); padding: 58px 96px 58px; margin-bottom: clamp(32px, 5vh, 52px); }
.oa .res-num::before { font-size: clamp(7rem, 15vw, 12rem); }
.oa-fig { position: relative; width: min(860px, 100vw - 32px); margin: 48px 0; margin-inline: calc(50% - min(430px, 50vw - 16px));
  padding: 26px clamp(16px, 3vw, 36px) 30px; background: var(--oa-panel); border: 1px solid var(--line); font-size: 1rem; }
.oa-fig--wide { width: min(1040px, 100vw - 32px); margin-inline: calc(50% - min(520px, 50vw - 16px)); }
.oa-fig > .cb.tl { top: -1px; left: -1px; } .oa-fig > .cb.br { bottom: -1px; right: -1px; }
.oa-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; font: 500 max(.6rem, 11px)/1.35 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-t); }
.oa-head::before { content: attr(data-l); }
.oa-head::after { content: attr(data-r); color: var(--text2); text-align: right; }
@media (max-width: 699px) {
  .oa .res-card { min-height: 0; padding: 60px 20px 84px; }
  .oa-fig { padding-inline: 16px; }
  .oa-head { flex-direction: column; gap: 6px; } .oa-head::after { text-align: left; }
}
.oa-photo { position: relative; width: min(860px, 100vw - 32px); margin: 44px 0; margin-inline: calc(50% - min(430px, 50vw - 16px)); }
.oa-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.oa-photo figcaption, .oa-cap { margin-top: 10px; max-width: none; font: 500 max(.62rem, 11px)/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.oa-photo > .cb.tl { top: -6px; left: -6px; } .oa-photo > .cb.br { bottom: 22px; right: -6px; }

/* the guide's attribution line, set under the intro */
.res-prose > p.oa-sub { color: var(--text2); font-size: .98em; }
.res-prose > p.oa-sub em { font-style: italic; }

/* the companion link (pairs the two articles) */
.oa-pair { width: var(--col); margin: 30px auto 0; padding: 18px 22px; border: 1px solid var(--line2); border-left: 2px solid var(--teal); background: rgba(16, 35, 42, .35); max-width: none; }
.oa-pair-k { display: block; margin-bottom: 6px; font: var(--oa-lab); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-t); }
.oa-pair-k::before { content: attr(data-l); }
.oa-pair a { color: var(--text); font: 400 1.35rem/1.3 var(--serif); text-decoration: underline 1px var(--teal); text-underline-offset: 4px; }
.oa-pair-s { display: block; margin-top: 6px; color: var(--text2); font-size: .95rem; }

/* chapter glyph shared shell (case: the bridge · lead: the record) */
.oa-gl { position: absolute; right: 30px; bottom: 26px; width: 92px; height: 40px; overflow: visible; }
.oa-lead .oa-gl { width: 48px; height: 60px; }
@media (max-width: 699px) { .oa-gl { right: auto; left: 20px; bottom: 16px; } }

/* ==========================================================================
   CASE STUDY — body.oa-case. The spine: a bridge from Expertise to Professional relationships.
   ========================================================================== */
.oa-gl .g-n { fill: #0B0D10; stroke: rgba(244, 243, 239, .3); stroke-width: 1.2; }
.oa-gl .g-s { fill: none; stroke: rgba(244, 243, 239, .22); stroke-width: 1.4; stroke-dasharray: 2 2; }
.oa-gl .is-done.g-n { fill: rgba(244, 243, 239, .4); stroke: none; }
.oa-gl .is-done.g-s { stroke: rgba(244, 243, 239, .5); stroke-dasharray: none; }
.oa-gl .is-now.g-n { fill: var(--teal); stroke: none; filter: drop-shadow(0 0 4px rgba(25, 230, 207, .9)); }
.oa-gl .is-now.g-s { stroke: var(--teal); stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(25, 230, 207, .8)); }

/* hero plate photo + the bridge strip under the short answer */
.oa-case .res-plate img { object-position: 50% 40%; }
.oa-span { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 26px; max-width: 34em; }
.oa-span li { position: relative; list-style: none; padding-top: 22px; font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.oa-span li::before { content: ''; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--teal); background: #0B0D10; z-index: 1; }
.oa-span li::after { content: ''; position: absolute; left: 6px; right: -6px; top: 9px; height: 1.5px; background: linear-gradient(90deg, var(--teal), rgba(25, 230, 207, .35)); transform-origin: 0 50%; }
.oa-span li:last-child::after { display: none; }
.oa-span li:last-child::before { background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.oa-span li span { display: block; padding-right: 8px; }
@media (max-width: 559px) { .oa-span li { font-size: 10.5px; font-size: max(.62rem, 11px); letter-spacing: .04em; } .oa-span li span { word-break: break-word; } }

/* intro figure — the gap: expertise on one bank, engagement on the other */
.oa-gap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 0; }
.oa-bank { position: relative; padding: 18px 16px; border: 1px solid var(--line2); background: rgba(11, 13, 16, .9); }
.oa-bank b { display: block; color: var(--text); font: 400 1.35rem/1.2 var(--serif); }
.oa-bank .oa-lab { margin-bottom: 8px; }
.oa-bank.is-far { border-color: color-mix(in srgb, var(--teal) 55%, transparent); }
.oa-verbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oa-verbs span { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-t); }
.oa-mid { position: relative; height: 120px; }
.oa-mid .m-short { position: absolute; left: 0; top: 34px; width: 58%; height: 0; border-top: 2px dashed rgba(244, 243, 239, .45); }
.oa-mid .m-short::after { content: ''; position: absolute; right: -2px; top: -7px; width: 2px; height: 12px; background: rgba(244, 243, 239, .45); }
.oa-mid .m-l1 { position: absolute; left: 10px; top: 4px; right: 10px; color: var(--text2); }
.oa-mid .m-path { position: absolute; left: 0; right: 0; top: 78px; height: 2px; background: var(--teal); box-shadow: 0 0 8px rgba(25, 230, 207, .6); transform-origin: 0 50%; }
.oa-mid .m-steps { position: absolute; left: 0; right: 0; top: 86px; display: flex; justify-content: space-around; }
.oa-mid .m-steps span { font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-t); padding-top: 6px; }
.oa-mid .m-steps span::before { content: ''; display: block; width: 8px; height: 8px; margin: -11px auto 4px; border-radius: 50%; background: var(--teal); }
@media (max-width: 699px) {
  .oa-gap { grid-template-columns: 1fr; }
  .oa-mid { height: 150px; margin: 0 auto; width: 100%; }
  .oa-mid .m-short { left: 50%; top: 0; width: 0; height: 52px; border-top: 0; border-left: 2px dashed rgba(244, 243, 239, .45); }
  .oa-mid .m-short::after { right: auto; left: -7px; top: auto; bottom: -2px; width: 12px; height: 2px; }
  .oa-mid .m-l1 { left: calc(50% + 14px); top: 10px; right: 0; }
  .oa-mid .m-path { left: 0; right: 0; top: 76px; }
  .oa-mid .m-steps { top: 84px; }
}

/* ch01 — the brief: three goals, three things the audience needed to understand */
.oa-brief { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.oa-brief ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.oa-brief li { position: relative; padding: 12px 14px 12px 44px; border: 1px solid var(--line); background: rgba(11, 13, 16, .8); color: var(--text); line-height: 1.45; }
.oa-brief li::before { content: attr(data-n); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--teal); border-radius: 50%; font: 500 11px/1 var(--mono); color: var(--teal); }
.oa-brief .is-q li::before { content: '?'; border-color: var(--oa-blue); color: #8fb6ea; }
.oa-brief .oa-lab { margin-bottom: 10px; }
@media (max-width: 699px) { .oa-brief { grid-template-columns: 1fr; } }
.oa-prio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.oa-prio b { color: var(--text); font: 400 1.35rem/1.25 var(--serif); }
.oa-prio > span:last-child { color: var(--text2); font-size: .95rem; }

/* ch02 — research narrows to concerns, then opens into a direction for production */
.oa-flow { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, .8fr) 54px minmax(0, 1.25fr); align-items: stretch; }
.oa-col { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.oa-col > .oa-lab { margin-bottom: 4px; }
.oa-it { padding: 10px 12px; border: 1px solid var(--line); background: rgba(11, 13, 16, .85); color: var(--text); font-size: .95rem; line-height: 1.35; }
.oa-it.is-c { border-color: color-mix(in srgb, var(--teal) 60%, transparent); color: var(--text); font: 400 1.3rem/1.2 var(--serif); text-align: center; padding: 14px 10px; }
.oa-it.is-f b { display: block; font-weight: 600; color: var(--text); }
.oa-it.is-f span { display: block; margin-top: 2px; color: var(--accent-t); font-size: .9rem; }
.oa-it.is-f span::before { content: '\2192\00a0'; content: '\2192\00a0' / ''; }
.oa-band { position: relative; margin: 30px 0 0; }
.oa-band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25, 230, 207, .05), rgba(25, 230, 207, .22)); }
.oa-band.is-in::before { clip-path: polygon(0 0, 100% 28%, 100% 72%, 0 100%); }
.oa-band.is-out::before { clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%); background: linear-gradient(90deg, rgba(25, 230, 207, .22), rgba(25, 230, 207, .05)); }
@media (max-width: 799px) {
  .oa-flow { grid-template-columns: 1fr; }
  .oa-band { height: 40px; margin: 6px auto; width: 70%; }
  .oa-band.is-in::before { clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%); }
  .oa-band.is-out::before { clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%); }
}

/* ch03 — the formats, in the order the review ranked them */
.oa-fmts { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.oa-fmt { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); background: rgba(11, 13, 16, .85); }
.oa-fmt.is-top { border-color: color-mix(in srgb, var(--teal) 60%, transparent); background: linear-gradient(90deg, rgba(16, 35, 42, .8), rgba(11, 13, 16, .85)); }
.oa-fmt svg { width: 56px; height: 56px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oa-fmt-t { display: block; margin: 0; color: var(--text); font: 400 1.5rem/1.15 var(--serif); }
.oa-fmt .oa-rank { display: inline-block; margin-top: 8px; padding: 3px 8px; border: 1px solid var(--line2); font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.oa-fmt.is-top .oa-rank { border-color: var(--teal); color: var(--accent-t); }
.oa-fmt p { max-width: none; margin: 0; color: var(--text2); font-size: .98rem; line-height: 1.5; }
.oa-fmt p b { color: var(--text); font-weight: 600; }
@media (max-width: 699px) { .oa-fmt { grid-template-columns: 48px 1fr; } .oa-fmt svg { width: 44px; height: 44px; } .oa-fmt p { grid-column: 1 / -1; } }

/* the Oral Arts strip: real published assets */
.oa-strip { display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr; gap: 12px; align-items: end; }
.oa-strip figure { margin: 0; }
.oa-strip img, .oa-strip video { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #050607; }
.oa-strip video { aspect-ratio: 16 / 9; }
.oa-strip figcaption { margin-top: 8px; font: var(--oa-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
@media (max-width: 799px) { .oa-strip { grid-template-columns: repeat(3, 1fr); } .oa-strip figure:first-child { grid-column: 1 / -1; } }

/* ch04 — results: followers doubled; the multiples drawn as blocks (one block = the comparison figure) */
.oa-fol { display: grid; gap: 14px; }
.oa-fol-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.oa-fol-row .oa-lab { text-align: right; }
.oa-fol-bar { position: relative; height: 46px; }
.oa-fol-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: rgba(244, 243, 239, .16); border: 1px solid var(--line2); transform-origin: 0 50%; }
.oa-fol-row.is-now .oa-fol-bar i { background: linear-gradient(90deg, rgba(25, 230, 207, .25), rgba(25, 230, 207, .55)); border-color: var(--teal); box-shadow: 0 0 18px rgba(25, 230, 207, .25); }
.oa-fol-bar b { position: absolute; left: calc(var(--w) + 12px); top: 50%; transform: translateY(-50%); color: var(--text); font: 400 1.7rem/1 var(--serif); white-space: nowrap; }
.oa-fol-row.is-now .oa-fol-bar b { left: auto; right: calc(100% - var(--w) + 12px); color: #04201d; color: var(--text); }
.oa-fol-tag { justify-self: end; margin-top: 4px; padding: 4px 10px; border: 1px solid var(--teal); font: var(--oa-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-t); }
@media (max-width: 599px) { .oa-fol-row { grid-template-columns: 1fr; gap: 6px; } .oa-fol-row .oa-lab { text-align: left; } }

.oa-mult { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.oa-mult li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 76px; gap: 14px; align-items: start; }
.oa-mult .oa-lab { text-align: right; padding-top: 2px; }
.oa-mult .m-x { color: var(--text); font: 400 1.6rem/1 var(--serif); text-align: right; }
.oa-blk { display: flex; flex-wrap: wrap; gap: 4px; }
.oa-blk i { width: 14px; height: 14px; background: var(--teal); box-shadow: 0 0 6px rgba(25, 230, 207, .35); }
.oa-blk i.is-base { background: transparent; border: 1.5px solid rgba(244, 243, 239, .7); box-shadow: none; margin-right: 8px; }
.oa-blk i.is-part { background: linear-gradient(90deg, var(--teal) var(--p), rgba(25, 230, 207, .14) var(--p)); }
.oa-mean { grid-column: 2 / 4; margin-top: 4px; max-width: none; color: var(--text2); font-size: .92rem; line-height: 1.45; }
.oa-key { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.oa-key span { display: inline-flex; align-items: center; gap: 8px; font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.oa-key i { width: 12px; height: 12px; background: var(--teal); } .oa-key i.is-base { background: transparent; border: 1.5px solid rgba(244, 243, 239, .7); }
@media (max-width: 599px) {
  .oa-mult li { grid-template-columns: minmax(0, 1fr) 64px; }
  .oa-mult .oa-lab { grid-column: 1 / -1; text-align: left; }
  .oa-mean { grid-column: 1 / -1; }
  .oa-blk i { width: 12px; height: 12px; }
}

/* the results table (a real table; phones restyle rows as cards) */
.oa-tw { width: min(860px, 100vw - 32px); margin: 36px 0 0; margin-inline: calc(50% - min(430px, 50vw - 16px)); }
.oa-t { width: 100%; border-collapse: collapse; text-align: left; font-size: .98rem; }
.oa-t caption { caption-side: top; padding-bottom: 12px; text-align: left; font: var(--oa-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.oa-t th, .oa-t td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); line-height: 1.45; }
.oa-t thead th { font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); border-bottom-color: var(--line2); }
.oa-t .is-n { text-align: right; font-variant-numeric: tabular-nums; }
.oa-t tbody th { font-weight: 600; }
.oa-t td:last-child { color: var(--accent-t); }
.oa-note { width: var(--col); margin: 16px auto 0; max-width: none; color: var(--text2); font-size: .92rem; line-height: 1.6; font-style: italic; }
@media (max-width: 639px) {
  .oa-t caption { display: block; }
  .oa-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .oa-t, .oa-t tbody, .oa-t tr, .oa-t th, .oa-t td { display: block; width: 100%; }
  .oa-t tr { padding: 12px 0; border-bottom: 1px solid var(--line2); }
  .oa-t th, .oa-t td { padding: 3px 0; border: 0; text-align: left !important; }
  .oa-t td::before { content: attr(data-h) ': '; color: var(--text2); font: var(--oa-lab); letter-spacing: .08em; text-transform: uppercase; }
}

/* the competitor line */
.oa-rankl { display: grid; gap: 0; margin-top: 8px; }
.oa-rankl .r-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--teal); background: rgba(16, 35, 42, .7); color: var(--text); font: 400 1.4rem/1.2 var(--serif); }
.oa-rankl .r-rest { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-top: 0; }
.oa-rankl .r-rest span { padding: 4px 10px; border: 1px solid var(--line2); color: var(--text2); font-size: .95rem; }

/* ch05 — where the attention went: a climb from engagement to closer contact */
.oa-climb { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; }
.oa-climb li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(90px + var(--s) * 38px); padding: 12px; border: 1px solid var(--line); border-bottom: 2px solid var(--teal); background: linear-gradient(180deg, rgba(25, 230, 207, calc(.04 + var(--s) * .05)), rgba(11, 13, 16, .85)); color: var(--text); font-size: .95rem; line-height: 1.35; }
.oa-climb li .oa-lab { margin-bottom: 6px; color: var(--accent-t); }
.oa-climb li:last-child { border-color: color-mix(in srgb, var(--teal) 60%, transparent); box-shadow: 0 0 22px rgba(25, 230, 207, .14); }
@media (max-width: 799px) { .oa-climb { grid-template-columns: 1fr; } .oa-climb li { min-height: 0; margin-left: calc(var(--s) * 14px); } }
.oa-lib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 8px; }
.oa-lib > div { position: relative; padding: 14px 16px 14px 14px; border: 1px solid var(--line); background: rgba(11, 13, 16, .85); color: var(--text); font-size: .95rem; line-height: 1.4; }
.oa-lib > div + div { border-left: 0; }
.oa-lib > div + div::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-top: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); transform: rotate(45deg); background: transparent; }
.oa-lib > div:last-child { border-color: color-mix(in srgb, var(--teal) 55%, transparent); }
@media (max-width: 699px) { .oa-lib { grid-template-columns: 1fr; } .oa-lib > div + div { border-left: 1px solid var(--line); border-top: 0; } .oa-lib > div + div::before { left: 24px; top: -7px; margin-top: 0; transform: rotate(135deg); } }

/* ch06 — the four questions, each tied back to the measure that answers it */
.oa-qs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oa-qs li { display: grid; align-content: start; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(11, 13, 16, .85); }
.oa-qs li b { color: var(--text); font: 400 1.3rem/1.25 var(--serif); }
.oa-qs li span { display: flex; flex-wrap: wrap; gap: 6px; }
.oa-qs li span em { font-style: normal; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-t); }
@media (max-width: 699px) { .oa-qs { grid-template-columns: 1fr; } }

/* ==========================================================================
   LEAD GUIDE — body.oa-lead. The spine: one follower record that fills, chapter by chapter.
   ========================================================================== */
.oa-gl .g-f { fill: rgba(11, 13, 16, .7); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; }
.oa-gl .g-r { fill: none; stroke: rgba(244, 243, 239, .3); stroke-width: .8; stroke-dasharray: 1.6 1.4; }
.oa-gl .g-r.is-done { fill: rgba(244, 243, 239, .34); stroke: none; }
.oa-gl .g-r.is-now { fill: var(--teal); stroke: none; filter: drop-shadow(0 0 3px rgba(25, 230, 207, .9)); }
.oa-gl .g-a { fill: none; stroke: rgba(244, 243, 239, .3); stroke-width: 1.2; }
.oa-gl .g-a.is-done { stroke: rgba(244, 243, 239, .5); } .oa-gl .g-a.is-now { stroke: var(--teal); }

/* hero schematic */
.oa-lead .res-plate-frame { background: radial-gradient(60% 80% at 55% 50%, rgba(24, 58, 102, .3), transparent 72%), #050607; }
.oa-lead .res-plate-frame::after { display: none; }
.oa-bp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.oa-bp .bp-grid { fill: none; stroke: rgba(52, 120, 212, .14); stroke-width: 1; }
.oa-bp .bp-card { fill: rgba(11, 13, 16, .96); stroke: rgba(244, 243, 239, .3); stroke-width: 2; }
.oa-bp .bp-card.is-t { stroke: color-mix(in srgb, var(--teal) 70%, transparent); }
.oa-bp .bp-dim { fill: rgba(244, 243, 239, .16); }
.oa-bp .bp-obs { fill: none; stroke: #5d93dc; stroke-width: 2; stroke-dasharray: 7 6; }
.oa-bp .bp-con { fill: rgba(25, 230, 207, .85); }
.oa-bp .bp-av { fill: rgba(244, 243, 239, .2); }
.oa-bp .bp-path { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(25, 230, 207, .6)); }
.oa-bp .bp-bub { fill: rgba(244, 243, 239, .1); stroke: rgba(244, 243, 239, .26); stroke-width: 1.5; }
.oa-bp .bp-bub.is-us { fill: rgba(25, 230, 207, .16); stroke: color-mix(in srgb, var(--teal) 70%, transparent); }
.oa-bp .bp-ring { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.oa-bp .bp-chk { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.oa-bp text { font: 500 26px/1 var(--mono); letter-spacing: .14em; fill: rgba(244, 243, 239, .62); text-transform: uppercase; }
.oa-bp text.is-t { fill: var(--teal); }
.oa-bp .bp-n circle { fill: #0B0D10; stroke: var(--teal); stroke-width: 2.5; }
.oa-bp .bp-n text { font: 600 26px/1 var(--mono); fill: var(--teal); text-anchor: middle; letter-spacing: 0; }

/* ch01 — clues from the profile answer two different questions */
.oa-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 26px; align-items: center; }
.oa-prof { padding: 18px; border: 1px solid var(--line2); background: rgba(11, 13, 16, .9); }
.oa-prof-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.oa-prof-top i { width: 44px; height: 44px; border-radius: 50%; background: rgba(244, 243, 239, .18); flex: none; }
.oa-prof-top b { color: var(--text); font: 400 1.3rem/1.2 var(--serif); }
.oa-clues { display: flex; flex-wrap: wrap; gap: 6px; }
.oa-clue { padding: 4px 9px; border: 1.5px dashed #5d93dc; font: var(--oa-lab); letter-spacing: .08em; text-transform: uppercase; color: #a9c6ef; }
.oa-asks { display: grid; gap: 12px; }
.oa-ask { position: relative; padding: 14px 16px 14px 18px; border: 1px solid color-mix(in srgb, var(--teal) 50%, transparent); background: rgba(16, 35, 42, .5); color: var(--text); font: 400 1.25rem/1.3 var(--serif); }
.oa-ask .oa-lab { margin-bottom: 6px; color: var(--accent-t); font-family: var(--mono); }
.oa-ask::before { content: ''; position: absolute; left: -27px; top: 50%; width: 26px; height: 1.5px; background: var(--teal); }
.oa-gate { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.oa-gate > div { padding: 12px 14px; border: 1px solid var(--line); color: var(--text); font-size: .95rem; line-height: 1.4; }
.oa-gate > div.is-on { border-color: var(--teal); }
.oa-gate > i { width: 34px; height: 1.5px; background: var(--teal); position: relative; }
.oa-gate > i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); transform: rotate(45deg); }
@media (max-width: 699px) {
  .oa-two { grid-template-columns: 1fr; } .oa-ask::before { display: none; }
  .oa-gate { grid-template-columns: 1fr; } .oa-gate > i { transform: rotate(90deg); justify-self: center; margin: 6px 0; }
}

/* ch02 — the record table + observed vs confirmed */
.oa-t.is-rec td:nth-child(2) { color: var(--text); }
.oa-t.is-rec td:last-child { color: var(--text2); }
.oa-oc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.oa-oc > div { padding: 16px 18px; color: var(--text); line-height: 1.45; }
.oa-oc .is-obs { border: 1.5px dashed #5d93dc; background: rgba(52, 120, 212, .07); }
.oa-oc .is-con { border: 1.5px solid var(--teal); background: rgba(25, 230, 207, .07); }
.oa-oc .is-obs .oa-lab { color: #a9c6ef; } .oa-oc .is-con .oa-lab { color: var(--accent-t); }
.oa-oc > div .oa-lab { margin-bottom: 8px; }
.oa-oc > div p { max-width: none; margin: 0; font: 400 1.2rem/1.35 var(--serif); }
.oa-oc > div small { display: block; margin-top: 8px; color: var(--text2); font: var(--oa-lab); letter-spacing: .08em; text-transform: uppercase; }
.oa-oc > i { align-self: center; width: 40px; height: 1.5px; background: var(--teal); position: relative; }
.oa-oc > i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); transform: rotate(45deg); }
@media (max-width: 699px) { .oa-oc { grid-template-columns: 1fr; } .oa-oc > i { transform: rotate(90deg); justify-self: center; margin: 8px 0; } }

/* ch03 — opening messages (real text, styled as a direct message; the detail that does the work is marked) */
.oa-msg { position: relative; width: var(--col); margin: 22px auto; padding: 18px 20px 18px 22px; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); border-radius: 18px 18px 18px 4px; background: rgba(16, 35, 42, .55); }
.oa-msg p { max-width: none; margin: 0; color: var(--text); font: 400 1.22rem/1.5 var(--serif); }
.oa-msg mark { background: none; color: var(--accent-t); box-shadow: inset 0 -.42em 0 rgba(25, 230, 207, .16); padding: 0 .08em; }
.oa-msg .oa-lab { margin-bottom: 8px; color: var(--accent-t); }
.oa-msg-k { display: block; margin-bottom: 8px; font: var(--oa-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.oa-msg-k::before { content: attr(data-l); }
.res-prose > h3.oa-h3 { margin: 2.2em 0 .6em; color: var(--text); font: 400 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.2 var(--serif); }

/* ch04 — the reply becomes research: a thread whose answers flow into the record */
.oa-thread { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.oa-bubs { display: grid; gap: 12px; }
.oa-bub { max-width: 88%; padding: 12px 16px; border: 1px solid var(--line2); border-radius: 16px 16px 16px 4px; background: rgba(244, 243, 239, .06); color: var(--text); line-height: 1.4; font-size: .98rem; }
.oa-bub.is-us { justify-self: end; border-radius: 16px 16px 4px 16px; border-color: color-mix(in srgb, var(--teal) 55%, transparent); background: rgba(25, 230, 207, .09); }
.oa-bub .oa-lab { margin-bottom: 4px; }
.oa-bub .oa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.oa-bub .oa-tags span { padding: 3px 8px; border: 1px solid var(--teal); font: var(--oa-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-t); }
.oa-rec { padding: 16px; border: 1px solid var(--line2); background: rgba(11, 13, 16, .92); }
.oa-rec .oa-lab { margin-bottom: 10px; }
.oa-rec-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.oa-rec-row b { font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--text2); font-weight: 500; }
.oa-rec-row span { color: var(--text); font-size: .95rem; }
.oa-rec-row.is-new { border-top-color: var(--teal); }
.oa-rec-row.is-new b { color: var(--accent-t); }
.oa-rec-row .is-blank { display: block; height: 10px; width: 70%; margin-top: 4px; background: var(--oa-dim); }
@media (max-width: 799px) { .oa-thread { grid-template-columns: 1fr; } }

/* ch05 — anatomy of a message that sounds like a person */
.oa-anat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.oa-anat-msg { padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); border-radius: 18px 18px 18px 4px; background: rgba(16, 35, 42, .55); color: var(--text); font: 400 1.25rem/1.75 var(--serif); }
.oa-anat-msg u { text-decoration: none; border-bottom: 1.5px solid var(--teal); }
.oa-anat-msg sup { font: 600 11px/1 var(--mono); color: var(--teal); margin-left: 2px; vertical-align: .7em; }
.oa-anat ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.oa-anat li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; color: var(--text); font-size: .98rem; }
.oa-anat li::before { content: attr(data-n); display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--teal); border-radius: 50%; font: 600 11px/1 var(--mono); color: var(--teal); }
.oa-bal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.oa-bal > div { padding: 14px 16px; border: 1px solid var(--line2); color: var(--text); font: 400 1.15rem/1.35 var(--serif); }
.oa-bal > div.is-t { border-color: var(--teal); }
.oa-bal > b { color: var(--teal); font: 400 2rem/1 var(--serif); }
@media (max-width: 799px) { .oa-anat, .oa-bal { grid-template-columns: 1fr; } .oa-bal > b { justify-self: center; } }

/* ch06 — interest becomes practical help; one conversation moves beyond Instagram */
.oa-need { display: grid; gap: 10px; }
.oa-need > div { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.oa-need > div > span { padding: 12px 14px; border: 1px solid var(--line); color: var(--text); line-height: 1.4; font-size: .98rem; }
.oa-need > div > span + i + span { border-color: color-mix(in srgb, var(--teal) 55%, transparent); }
.oa-need > div > i { height: 1.5px; background: var(--teal); position: relative; }
.oa-need > div > i::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal); transform: rotate(45deg); }
.oa-tl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 30px; padding-top: 34px; }
.oa-tl::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: linear-gradient(90deg, rgba(244, 243, 239, .3) 25%, var(--teal) 25%); transform-origin: 0 50%; }
.oa-tl::after { content: ''; position: absolute; left: 25%; top: 0; bottom: 0; border-left: 1.5px dashed rgba(244, 243, 239, .35); }
.oa-tl > div { position: relative; padding: 0 14px 0 0; color: var(--text); font-size: .95rem; line-height: 1.4; }
.oa-tl > div::before { content: ''; position: absolute; left: 0; top: -26px; width: 12px; height: 12px; border-radius: 50%; background: #0B0D10; border: 2px solid var(--teal); }
.oa-tl > div:first-child::before { border-color: rgba(244, 243, 239, .6); }
.oa-tl > div:last-child::before { background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.oa-tl > div .oa-lab { margin-bottom: 4px; }
.oa-tl > div:not(:first-child) { padding-left: 14px; }
.oa-tl > div:not(:first-child)::before { left: 14px; }
.oa-tl-x { position: absolute; left: calc(25% + 8px); top: -4px; font: var(--oa-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.oa-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.oa-acts span { padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); font: var(--oa-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-t); }
@media (max-width: 699px) {
  .oa-need > div { grid-template-columns: 1fr; } .oa-need > div > i { transform: rotate(90deg); width: 26px; justify-self: center; margin: 8px 0; }
  .oa-tl { grid-template-columns: 1fr; gap: 18px; padding: 0 0 0 30px; }
  .oa-tl::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(244, 243, 239, .3) 18%, var(--teal) 18%); transform-origin: 50% 0; }
  .oa-tl::after { display: none; }
  .oa-tl > div, .oa-tl > div:not(:first-child) { padding: 0; }
  .oa-tl > div::before, .oa-tl > div:not(:first-child)::before { left: -29px; top: 3px; }
  .oa-tl-x { position: static; display: block; margin: -8px 0 0; }
}

/* ch07 — close the loop */
.oa-loop { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: center; }
.oa-ring { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; }
.oa-ring svg { width: 100%; height: 100%; overflow: visible; }
.oa-ring .rg-track { fill: none; stroke: rgba(244, 243, 239, .12); stroke-width: 10; }
.oa-ring .rg-arc { fill: none; stroke: var(--teal); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(25, 230, 207, .5)); }
.oa-ring .rg-dot { fill: #0B0D10; stroke: var(--teal); stroke-width: 3; }
.oa-ring .rg-chk { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.oa-ring text { font: 600 16px/1 var(--mono); fill: var(--teal); text-anchor: middle; }
.oa-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.oa-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; color: var(--text); line-height: 1.4; }
.oa-steps li::before { content: attr(data-n); display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--teal); border-radius: 50%; font: 600 11px/1 var(--mono); color: var(--teal); }
.oa-steps li.is-done::before { content: '\2713'; content: '\2713' / ''; background: var(--teal); color: #04201d; }
.oa-steps li span { display: block; }
.oa-steps li em { grid-column: 2; display: block; margin-top: 3px; font-style: normal; color: var(--accent-t); font-family: var(--serif); font-size: 1.12rem; }
@media (max-width: 699px) { .oa-loop { grid-template-columns: 1fr; } .oa-ring { max-width: 220px; margin: 0 auto; } }

/* ch08 — what you learn decides what comes next */
.oa-sort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.oa-who { display: grid; gap: 10px; }
.oa-who > div { padding: 12px 14px; border: 1px solid var(--line); color: var(--text); line-height: 1.4; }
.oa-who > div .oa-lab { margin-bottom: 4px; }
.oa-route { display: grid; gap: 14px; align-content: center; }
.oa-rt { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; }
.oa-dots { position: relative; height: 40px; }
.oa-dots i { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #5d93dc; }
.oa-dots i:nth-child(1) { left: 0; top: 20%; } .oa-dots i:nth-child(2) { left: 10px; top: 52%; } .oa-dots i:nth-child(3) { left: 2px; top: 82%; }
.oa-dots i.is-join { left: 52px !important; top: 50% !important; background: var(--teal); width: 16px; height: 16px; margin-top: -8px; box-shadow: 0 0 10px var(--teal); }
.oa-rt > div { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--teal) 50%, transparent); color: var(--text); line-height: 1.4; }
.oa-rt > div b { display: block; color: var(--accent-t); font: var(--oa-lab); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }
@media (max-width: 699px) { .oa-sort { grid-template-columns: 1fr; } }

/* ch09 — the working record (the tool) */
.oa-tool h3 { margin: 0 0 8px; color: var(--text); font: 400 1.9rem/1.15 var(--serif); }
.oa-tool-lede, .oa-priv { max-width: none; color: var(--text2); font-size: .98rem; line-height: 1.5; }
.oa-priv { margin-top: 6px; font-size: .88rem; }
.oa-fields { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.oa-f { display: grid; gap: 6px; }
.oa-f label { display: flex; gap: 10px; align-items: baseline; color: var(--text); font-weight: 600; line-height: 1.35; }
.oa-f label b { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--teal); border-radius: 50%; font: 600 11px/1 var(--mono); color: var(--teal); }
.oa-f .oa-hint { margin: 0 0 0 32px; max-width: none; color: var(--text2); font-size: .88rem; line-height: 1.4; }
.oa-f textarea { width: 100%; min-height: 64px; padding: 10px 12px; resize: vertical; border: 1px solid var(--line2); background: rgba(5, 6, 7, .9); color: var(--text); font: 400 1rem/1.5 var(--sans); }
.oa-f textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.oa-f.is-wide { grid-column: 1 / -1; }
.oa-acts-b { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.oa-btn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--teal); background: transparent; color: var(--text); font: 500 max(.72rem, 11px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.oa-btn:hover { background: rgba(25, 230, 207, .12); }
.oa-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.oa-btn[data-do="clear"] { border-color: var(--line2); color: var(--text2); }
@media (max-width: 699px) { .oa-fields { grid-template-columns: 1fr; } .oa-f.is-wide { grid-column: auto; } }

/* the source note */
.oa-src { width: var(--col); margin: 34px auto 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 2px solid var(--line2); }
.oa-src p { max-width: none; margin: 0; color: var(--text2); font-size: .92rem; line-height: 1.6; font-style: italic; }
.oa-src .oa-lab { margin-bottom: 6px; font-style: normal; }

/* ==========================================================================
   Motion: one-shot, on first view only, never loops. Default state above is final.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* case: the bridge strip under the short answer draws left to right */
  html.ready .oa-span:not(.in) li::after { transform: scaleX(0); }
  html.ready .oa-span:not(.in) li::before { opacity: .2; }
  .oa-span li::after { transition: transform .5s var(--ease) calc(var(--k, 0) * .28s + .3s); }
  .oa-span li::before { transition: opacity .4s var(--ease) calc(var(--k, 0) * .28s + .2s); }

  /* intro: the short line stops short, then the path crosses */
  html.ready .oa-gap:not(.in) .m-short { clip-path: inset(0 100% 0 0); }
  html.ready .oa-gap:not(.in) .m-path { transform: scaleX(0); }
  html.ready .oa-gap:not(.in) .m-steps span, html.ready .oa-gap:not(.in) .is-far { opacity: .35; }
  .oa-gap .m-short { transition: clip-path .9s var(--ease) .3s; }
  .oa-gap .m-path { transition: transform 1.2s var(--ease) 1.5s; }
  .oa-gap .m-steps span { transition: opacity .5s var(--ease) calc(1.6s + var(--k, 0) * .35s); }
  .oa-gap .is-far { transition: opacity .6s var(--ease) 2.7s, border-color .6s; }
  @media (max-width: 699px) { html.ready .oa-gap:not(.in) .m-short { clip-path: inset(0 0 100% 0); } }

  /* ch01: goals then questions light in order */
  html.ready .oa-brief:not(.in) li { opacity: .35; transform: translateY(6px); }
  .oa-brief li { transition: opacity .5s var(--ease) calc(var(--k, 0) * .14s + .2s), transform .5s var(--ease) calc(var(--k, 0) * .14s + .2s); }

  /* ch02: the research narrows, then opens */
  html.ready .oa-flow:not(.in) .oa-band::before { opacity: 0; }
  html.ready .oa-flow:not(.in) .oa-it { opacity: .35; }
  .oa-flow .oa-band::before { transition: opacity .7s var(--ease) var(--d, .6s); }
  .oa-flow .oa-it { transition: opacity .5s var(--ease) var(--d, 0s); }

  /* ch03: formats arrive in rank order */
  html.ready .oa-fmts:not(.in) .oa-fmt { opacity: .35; transform: translateX(-10px); }
  .oa-fmt { transition: opacity .5s var(--ease) calc(var(--k, 0) * .18s + .2s), transform .5s var(--ease) calc(var(--k, 0) * .18s + .2s); }

  /* ch04: the follower bars grow; the blocks fill one by one */
  html.ready .oa-fol:not(.in) .oa-fol-bar i { transform: scaleX(.02); }
  html.ready .oa-fol:not(.in) .oa-fol-tag { opacity: .35; }
  .oa-fol .oa-fol-bar i { transition: transform 1.2s var(--ease) calc(var(--k, 0) * .5s + .2s); }
  .oa-fol .oa-fol-tag { transition: opacity .5s var(--ease) 1.6s; }
  html.ready .oa-mult:not(.in) .oa-blk i:not(.is-base) { opacity: .08; transform: scale(.6); }
  .oa-mult .oa-blk i { transition: opacity .25s var(--ease) calc(var(--r, 0) * .25s + var(--b, 0) * .045s + .3s), transform .25s var(--ease) calc(var(--r, 0) * .25s + var(--b, 0) * .045s + .3s); }

  /* ch05: the climb rises step by step */
  html.ready .oa-climb:not(.in) li { opacity: .35; transform: translateY(14px); }
  .oa-climb li { transition: opacity .55s var(--ease) calc(var(--s) * .22s + .2s), transform .55s var(--ease) calc(var(--s) * .22s + .2s); }
  html.ready .oa-lib:not(.in) > div { opacity: .35; }
  .oa-lib > div { transition: opacity .5s var(--ease) calc(var(--k, 0) * .3s + .2s); }

  /* ch06: questions tie back to measures */
  html.ready .oa-qs:not(.in) li em { opacity: .35; }
  .oa-qs li em { transition: opacity .5s var(--ease) calc(var(--k, 0) * .2s + .5s); }

  /* lead hero: the path draws, the ring closes */
  html.ready .oa-lead .res-plate:not(.in) .bp-path { stroke-dashoffset: 1; }
  html.ready .oa-lead .res-plate:not(.in) .bp-ring { stroke-dashoffset: 1; }
  html.ready .oa-lead .res-plate:not(.in) .bp-step { opacity: .25; }
  html.ready .oa-lead .res-plate:not(.in) .bp-obs { stroke: rgba(93, 147, 220, .25); }
  .oa-lead .res-plate .bp-path { transition: stroke-dashoffset 2.6s var(--ease) .5s; }
  .oa-lead .res-plate .bp-ring { transition: stroke-dashoffset 1.1s var(--ease) 2.9s; }
  .oa-lead .res-plate .bp-step { transition: opacity .6s var(--ease) calc(var(--k, 0) * .55s + .4s); }

  /* ch01: clues travel toward the two questions */
  html.ready .oa-two:not(.in) .oa-clue { opacity: .35; }
  html.ready .oa-two:not(.in) .oa-ask { opacity: .35; transform: translateX(10px); }
  .oa-two .oa-clue { transition: opacity .4s var(--ease) calc(var(--k, 0) * .12s + .2s); }
  .oa-two .oa-ask { transition: opacity .6s var(--ease) calc(var(--k, 0) * .3s + 1s), transform .6s var(--ease) calc(var(--k, 0) * .3s + 1s); }

  /* ch02: observed becomes confirmed */
  html.ready .oa-oc:not(.in) .is-con { opacity: .35; border-style: dashed; border-color: #5d93dc; }
  html.ready .oa-oc:not(.in) > i { transform: scaleX(0); }
  .oa-oc .is-con { transition: opacity .6s var(--ease) 1.1s, border-color .6s var(--ease) 1.1s; }
  .oa-oc > i { transition: transform .6s var(--ease) .5s; transform-origin: 0 50%; }

  /* ch03: the detail that does the work is marked as the message arrives */
  html.ready .oa-msg:not(.in) mark { box-shadow: inset 0 0 0 rgba(25, 230, 207, 0); color: var(--text); }
  .oa-msg mark { transition: box-shadow .6s var(--ease) .6s, color .6s var(--ease) .6s; }

  /* ch04: the thread plays, then its answers land in the record */
  html.ready .oa-thread:not(.in) .oa-bub { opacity: .35; transform: translateY(8px); }
  html.ready .oa-thread:not(.in) .oa-rec-row.is-new span { opacity: .35; }
  html.ready .oa-thread:not(.in) .oa-rec-row.is-new { border-top-color: var(--line); }
  .oa-thread .oa-bub { transition: opacity .5s var(--ease) calc(var(--k, 0) * .6s + .2s), transform .5s var(--ease) calc(var(--k, 0) * .6s + .2s); }
  .oa-thread .oa-rec-row.is-new span { transition: opacity .5s var(--ease) calc(var(--k, 0) * .15s + 2s); }
  .oa-thread .oa-rec-row.is-new { transition: border-color .5s var(--ease) 2s; }

  /* ch05: each part of the message is marked in turn */
  html.ready .oa-anat:not(.in) u { border-bottom-color: transparent; }
  html.ready .oa-anat:not(.in) li { opacity: .35; }
  .oa-anat u, .oa-anat li { transition: border-color .5s var(--ease) calc(var(--k, 0) * .3s + .3s), opacity .5s var(--ease) calc(var(--k, 0) * .3s + .3s); }

  /* ch06: the conversation crosses beyond Instagram */
  html.ready .oa-tl:not(.in)::before { transform: scaleX(0); }
  html.ready .oa-tl:not(.in) > div { opacity: .35; }
  .oa-tl::before { transition: transform 1.8s var(--ease) .2s; }
  .oa-tl > div { transition: opacity .5s var(--ease) calc(var(--k, 0) * .45s + .3s); }
  @media (max-width: 699px) { html.ready .oa-tl:not(.in)::before { transform: scaleY(0); } }

  /* ch07: the loop closes */
  html.ready .oa-loop:not(.in) .rg-arc { stroke-dashoffset: 1; }
  html.ready .oa-loop:not(.in) .rg-chk { opacity: 0; }
  html.ready .oa-loop:not(.in) .oa-steps li { opacity: .35; }
  html.ready .oa-loop:not(.in) .oa-steps li.is-done::before { background: transparent; color: var(--teal); }
  .oa-loop .rg-arc { transition: stroke-dashoffset 2.2s var(--ease) .3s; }
  .oa-loop .rg-chk { transition: opacity .4s var(--ease) 2.5s; }
  .oa-loop .oa-steps li { transition: opacity .5s var(--ease) calc(var(--k, 0) * .5s + .3s); }
  .oa-loop .oa-steps li.is-done::before { transition: background .4s var(--ease) 2.5s, color .4s var(--ease) 2.5s; }

  /* ch08: several questions join into one content piece */
  html.ready .oa-sort:not(.in) .oa-dots i.is-join { left: 4px !important; top: 52% !important; opacity: .4; }
  html.ready .oa-sort:not(.in) .oa-rt > div { opacity: .35; }
  .oa-sort .oa-dots i.is-join { transition: left .8s var(--ease) .6s, opacity .6s var(--ease) .6s; }
  .oa-sort .oa-rt > div { transition: opacity .5s var(--ease) calc(var(--k, 0) * .3s + 1.2s); }
}

/* print: hide the figures; the working record prints as a plain worksheet */
@media print {
  .oa .res-plate, .oa-gl, .oa-fig[aria-hidden="true"], .oa-span, .oa-pair-k, .oa-acts-b, .oa-priv { display: none !important; }
  .oa-pair, .oa-tool, .oa-msg, .oa-src, .oa-tw { width: auto; margin-inline: 0; background: none !important; border-color: #999 !important; }
  .oa-tool h3, .oa-f label, .oa-hint, .oa-tool-lede, .oa-pair a, .oa-pair-s, .oa-msg p, .oa-src p, .oa-t th, .oa-t td, .oa-note { color: #000 !important; }
  .oa-f textarea { border: 0; border-bottom: 1px solid #000; background: none; color: #000; }
  html.oa-print-sheet body > :not(.oa-printroot) { display: none !important; }
  html.oa-print-sheet .oa-printroot { display: block !important; }
  .oa-printroot pre { white-space: pre-wrap; font: 11pt/1.55 Georgia, serif; color: #000; }
}
.oa-printroot { display: none; }