/* How it works — uses the site's own tokens (--ink --body --muted --line, Geist / Instrument Serif), its .eyebrow, h2 .line.it, .kicker, .cols3 */
.anf-sec{position:relative;background:var(--paper)}
.anf-track{position:relative;height:440vh}
.anf-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.anf-sticky .gridlines{position:absolute;inset:0;pointer-events:none}
.anf{position:absolute;inset:0;color:var(--ink);font-family:var(--font-sans)}
.anf-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.anf-head{position:absolute;z-index:3;left:var(--gut,40px);top:clamp(104px,14vh,132px);width:min(520px,38vw);pointer-events:none}
.anf-head .eyebrow{margin-bottom:18px}
.anf-head h2{margin:0}
.anf-head .lead{margin-top:16px;max-width:420px}

.anf-col{position:absolute;z-index:2;display:flex;flex-direction:column;gap:8px}
.anf-col.in{align-items:flex-start}.anf-col.out{align-items:flex-end}
.anf-pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px 0 11px;border:1px solid rgba(24,73,139,.12);border-radius:999px;background:#fff;font-size:13px;font-weight:450;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;
  box-shadow:0 1px 2px rgba(61,98,147,.08),0 6px 14px rgba(61,98,147,.07);transition:background .4s,color .4s,border-color .4s,opacity .4s}
.anf-pill i{width:6px;height:6px;border-radius:50%;background:#18498B;opacity:.55;flex:none}
.anf-col.out .anf-pill{flex-direction:row-reverse;padding:0 11px 0 14px}
.anf-pill.strong{border-color:rgba(24,73,139,.35);font-weight:500}
.anf-pill.on{background:rgb(24,73,139);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:inset 0 0 8px 4px rgba(255,255,255,.18),0 2px 5px rgba(61,98,147,.2),0 9px 9px rgba(61,98,147,.17)}
.anf-pill.on i{background:#fff;opacity:1}
.anf-pill.held{border-style:dashed;color:var(--muted);box-shadow:none;background:transparent}

.anf-parts{position:absolute;z-index:2;width:250px}
.anf-parts.l{left:var(--gut,40px)}.anf-parts.r{right:var(--gut,40px)}
.anf-part{position:absolute;left:0;width:250px;transition:color .3s}
.anf-part .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted-2);margin-right:8px}
.anf-part b{font-size:15px;font-weight:500;letter-spacing:-.03em}
.anf-part p{margin:5px 0 0;font-size:13px;line-height:1.42;letter-spacing:-.01em;color:var(--muted-2)}
.anf-part .a{position:absolute;top:6px;width:6px;height:6px;border-radius:50%;background:#18498B}
.anf-parts.l .anf-part .a{right:-16px}.anf-parts.r .anf-part .a{left:-16px}
.anf-part.on b,.anf-part.on .n{color:#1d46c9}
.anf-part.hold b,.anf-part.hold .n{color:#d9472f}

.anf-chip{position:absolute;z-index:3;transform:translate(-50%,-100%);font-size:12px;font-weight:500;letter-spacing:-.02em;padding:7px 11px;border-radius:999px;background:#fff;color:#18498B;border:1px solid rgba(24,73,139,.3);white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 6px 14px rgba(61,98,147,.12)}
.anf-chip.hold{color:#d9472f;border-color:rgba(243,96,73,.55)}

.anf-caps{position:absolute;z-index:2;right:var(--gut,40px);bottom:clamp(28px,5vh,48px);width:380px;height:110px}
.anf-bar{display:flex;gap:4px;margin-bottom:14px}
.anf-bar span{flex:1;height:2px;border-radius:2px;background:var(--line);transition:background .35s}
.anf-bar span.on{background:#18498B}
.anf-c{position:absolute;left:0;right:0;top:18px;margin:0;font-size:15px;line-height:1.45;letter-spacing:-.02em;color:var(--body);opacity:0;transition:opacity .35s}
.anf-c.on{opacity:1}
.anf-c .kicker{margin-bottom:8px}

.anf-list{padding:clamp(60px,10vh,110px) 0 clamp(80px,12vh,140px)}
.anf-list .cols3 + .cols3{margin-top:0;border-top:0}
/* headings sized like the site's other sticky stages (.s2 / .s4-bottom) */
.anf-head h2{font-size:clamp(30px,3.1vw,46px);letter-spacing:-0.055em;line-height:1.02;font-weight:500}
.anf-head h2 .line{display:block}
.anf-list .sec-head h2 .line{display:block}
/* round 9: the site's own marks — eyebrow squares, dashed hairlines */
.anf-part .a{width:7px;height:7px;border-radius:2px;background:#18498B;top:6px}
.anf-org{display:block;font-size:10px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;color:rgba(14,10,7,.45);margin:0 2px 8px}
.anf-col.out .anf-org{text-align:right}
/* merged with Approach: the statement line runs straight into the animation */
.statement.anf-lead{padding-bottom:clamp(24px,5vh,56px)}
.anf-list{padding-top:clamp(40px,7vh,80px)}
.anf-list .cols3{margin-top:clamp(20px,3vh,32px)}
.anf-part{transition:color .6s ease}
.anf-part b,.anf-part .n{transition:color .6s ease}
.anf-chip{transition:none}

/* ── r14, positions only (28 Sep) ────────────────────────────────────────────
   r14's pills, type and drawing are unchanged. Only where things sit moves:
   one left edge and one right edge (the site's .wrap edges, --anf-el / --anf-er, measured in JS),
   inputs and outputs level with each other under the lead, right labels on the eyebrow's line,
   the Decide pill under its tile (off the leader lines), and the grid starting under the heading. */
.anf-head{left:var(--anf-el,40px)}
.anf-parts.l{left:var(--anf-el,40px)}.anf-parts.r{right:var(--anf-er,40px)}
.anf-caps{right:var(--anf-er,40px)}
.anf-chip{transform:translate(-50%,0)}
.anf-sticky .gridlines{bottom:0}

/* ── 28 Sep · the approach, inside the pinned screen ──────────────────────────
   Statement: the site's .statement .big, Josh's two sentences set on three lines (53px so the first sentence is one line).
   Heading: "That's where we start." in the stage heading's place, r14-pos type.
   Principles: the site's .cols3, pinned under the drawing on the same four edges as the section's grid
   (anatomy-approach.js moves the grid onto the .wrap edges and stops it at the row's top rule). */
.anf-caps{display:none}
.statement.anf-lead .big{font-size:clamp(28px,3.68vw,53px);max-width:none}
.anf-steps{position:absolute;left:0;right:0;bottom:clamp(20px,4.5vh,44px);z-index:3}
.anf-steps .cols3{margin-top:0}
.anf-steps .cols3 > div{padding-top:22px;padding-bottom:0}
.anf-steps .cols3 > div + div{border-left:0;background:none}
.anf-steps .kicker{margin-bottom:12px}
.anf-steps h3{margin-bottom:10px}
.anf-steps p{max-width:42ch}
@media(max-width:700px){
  .anf-sec .anf-track{height:auto}
  .anf-sec .anf-sticky{position:relative;height:auto;overflow:visible}
  .anf-sec #anfStage{position:relative!important;height:var(--anf-h,1100px)}
  .anf-sec .anf-head{top:28px;left:var(--gut,24px);right:var(--gut,24px);width:auto}
  .anf-sec .anf-head h2{font-size:32px}
  .anf-sec .anf-head .lead{max-width:40ch;font-size:16px;line-height:1.5}
  .anf-sec .anf-parts,.anf-sec .anf-part{width:calc((100vw - 2*var(--anf-el,16px) - 18px)/2)}
  .anf-sec .anf-part .n{display:block;margin-bottom:5px}
  .anf-sec .anf-part p{font-size:14px;line-height:1.45}
  .anf-sec .anf-part b{font-size:16px}
  .anf-sec .anf-part .a{display:none}
  .anf-sec .anf-pill{height:28px;font-size:12px;gap:6px;padding-left:10px;padding-right:10px}
  .anf-steps{position:relative;bottom:auto;padding-bottom:56px}
  .anf-steps .cols3 > div + div{background:none}
}
@media(prefers-reduced-motion:reduce){.anf-sec .anf-track{height:auto}}
/* the step labels take one line each (wider), so the drawing keeps its size above the principles */
@media(min-width:701px){
  .anf-sec .anf-parts,.anf-sec .anf-part{width:352px}
  .anf-steps .cols3 > div{padding-right:18px}
}
/* "That's where we start." follows the statement straight on: the stage's own top margin is the gap */
.statement.anf-lead{padding-bottom:8px}
/* short laptop screens: names only, so the drawing keeps its size between the heading and the principles */
@media(min-width:701px) and (max-height:780px){.anf-sec .anf-part p{display:none}}

/* 30 Sep, Josh: "use the graphic size of the segmented thing from r14-grid" — the drawing was ~30% smaller here because the
   three principles took the bottom quarter of the pinned screen. While pinned on desktop they are names only (kicker + title),
   one compact row; the drawing gets the room back. */
@media(min-width:901px){
  .anf-steps{bottom:clamp(16px,3vh,30px)}
  .anf-steps .cols3 > div{padding-top:14px}
  .anf-steps .kicker{margin-bottom:6px}
  .anf-steps h3{margin-bottom:0;font-size:clamp(17px,1.35vw,20px)}
  .anf-steps p{display:none}
  .anf-steps [data-reveal]{opacity:1 !important;transform:none !important}   /* the row sits at the very bottom of the pinned screen, below the reveal line */
  /* what really held the drawing small: 352px one-line step labels on the right, which the tiles must stay clear of. r14-grid's label width. */
  .anf-sec .anf-parts,.anf-sec .anf-part{width:clamp(220px,18vw,272px)}
}