/* Article reader utilities (14 Nov 2026): utility bar and audio player under the article meta. Quiet, never sticky. */
.cf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 8px 0; border-bottom: 1px solid #D8D2C8; position: relative; }
.cf-tools__share { position: relative; }
.cf-tools__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; background: none; font: 500 15px/1 Inter, sans-serif; color: #122236; text-decoration: none; cursor: pointer; border-radius: 4px; }
.cf-tools__btn:first-child { margin-left: -12px; }
.cf-tools__btn:hover { color: #3E6FA5; background: #F1EEE8; }
.cf-tools__btn:focus-visible, .cf-tools__opt:focus-visible, .cf-audio button:focus-visible, .cf-audio select:focus-visible, .cf-audio input:focus-visible, .cf-tools__url:focus-visible { outline: 2px solid #122236; outline-offset: 2px; }
.cf-tools__btn svg { flex: none; }
.cf-tools__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: -12px; min-width: 200px; max-width: calc(100vw - 32px); padding: 8px; background: #fff; border: 1px solid #122236; box-shadow: 0 8px 24px rgba(18,34,54,.12); display: flex; flex-direction: column; box-sizing: border-box; }
.cf-tools__panel[hidden] { display: none; }
.cf-tools__opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border: 0; background: none; font: 500 15px/20px Inter, sans-serif; color: #122236; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.cf-tools__opt svg { flex: none; }
.cf-tools__opt:hover { background: #F1EEE8; }
.cf-tools__status:not(:empty) { padding: 4px 12px 8px; font-size: 14px; color: #24364F; }
.cf-tools__url { margin: 4px 12px 8px; padding: 8px; font: 14px Inter, sans-serif; border: 1px solid #BFB7A8; min-width: 0; }
.cf-audio { margin: 16px 0 0; }
.cf-audio__row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.cf-audio__play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #122236; color: #fff; cursor: pointer; transition: background .15s; }
.cf-audio__play:hover { background: #3E6FA5; }
.cf-audio__play svg { width: 12px; height: 12px; }
.cf-audio__play .cf-i-play { margin-left: 2px; }
.cf-audio__label { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 15px; line-height: 1.4; color: #24364F; }
.cf-audio__title { font-weight: 600; color: #122236; }
.cf-audio__sep { color: #8A93A0; }
.cf-audio__time { font-variant-numeric: tabular-nums; }
.cf-audio__note { font-size: 13px; color: #6B7686; }
.cf-audio__note::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 10px 0 2px; background: #D8D2C8; vertical-align: -1px; }
a.cf-audio__note { color: #6B7686; }
.cf-audio__ctl { display: flex; align-items: center; gap: 12px; margin: 4px 0 0 44px; max-width: 520px; }
.cf-audio__ctl[hidden] { display: none; }
.cf-audio__seek { flex: 1 1 auto; min-width: 0; height: 4px; accent-color: #122236; }
.cf-audio__rate select { min-height: 32px; padding: 0 4px; border: 1px solid #D8D2C8; border-radius: 4px; background: #fff; font: 13px Inter, sans-serif; color: #122236; }
.cf-audio__err { margin: 6px 0 0; font-size: 14px; color: #122236; }
@media (max-width: 480px) { .cf-audio__ctl { margin-left: 0; } .cf-audio__note::before { display: none; } .cf-audio__note { flex-basis: 100%; } }
.cf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cf-print-only { display: none; }
/* SoundCloud's mini player (as McKinsey uses it), in the site's navy */
.cf-audio--sc { margin: 16px 0 0; }
.cf-audio__sc { display: block; width: 100%; height: 20px; border: 0; }
.cf-audio__meta { margin: 6px 0 0; font-size: 13px; color: #6B7686; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }

/* Article film (14 Nov 2026): a poster that becomes the YouTube player on play. Same navy, line and type as the
   audio player; 16:9, the poster is a frame from the film itself. */
.cf-film { margin: 28px 0 8px; }
.cf-film__frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0E1A2B; border: 1px solid #E6EAF0; border-radius: 4px; color: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(18,34,54,.06), 0 12px 32px -18px rgba(18,34,54,.35); }
.cf-film__poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s; }
.cf-film__play { position: absolute; left: 82.4%; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: #fff; color: #122236; box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 10px 28px rgba(8,16,28,.35); transition: background .2s, color .2s, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.cf-film__play svg { margin-left: 3px; }
.cf-film__time { position: absolute; right: 14px; bottom: 12px; z-index: 1; padding: 3px 8px; border-radius: 3px; background: rgba(18,34,54,.82); font: 500 12px/1.4 Inter, system-ui, sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cf-film__frame:hover .cf-film__poster { transform: scale(1.015); }
.cf-film__frame:hover .cf-film__play { background: #122236; color: #fff; transform: scale(1.06); box-shadow: 0 0 0 12px rgba(255,255,255,.24), 0 12px 32px rgba(8,16,28,.4); }
.cf-film__frame:focus-visible { outline: 2px solid #122236; outline-offset: 3px; }
.cf-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cf-film--on .cf-film__play, .cf-film--on .cf-film__time { opacity: 0; }
.cf-film__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 10px; font: 400 14px/1.5 Inter, system-ui, sans-serif; color: #4A5A70; }
.cf-film__label { font-weight: 600; color: #122236; }
.cf-film__sep { color: #9AA6B6; }
.cf-film__yt { margin-left: auto; color: #3E6FA5; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cf-film__yt:hover { color: #122236; }
@media (max-width: 560px) { .cf-film__sep { display: none; } .cf-film__label { flex-basis: 100%; } .cf-film__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 8px 20px rgba(8,16,28,.3); } .cf-film__yt { margin-left: 0; flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .cf-film__poster, .cf-film__play { transition: none; } .cf-film__frame:hover .cf-film__poster, .cf-film__frame:hover .cf-film__play { transform: none; } }
@media print { .cf-film { display: none; } }