/* =========================================================
   Journey: framework.css (ours)
   The holistic well-being article: the wheel in its header (eight
   dimensions as turning networks around awareness, ringed by the
   three lenses), and the figures in its body (the lenses, the
   dimensions, where each type starts, the rule, a week in practice,
   the sources, the stories).
   Markup: components/views/framework-*.tsx. Motion: framework.js.
   Loads after article.css on that one article.
   ========================================================= */

.jf { --jf-ease: cubic-bezier(.32, .72, 0, 1); --jf-card: #fff; }

/* ---------- the header: the wheel where the picture would be ---------- */
.ja-pr.jf .ja-pr-band-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.jf .ja-pr-dek { margin: 0 0 26px; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--ink-mute); }
.jf .ja-pr-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.jf .ja-pr-ctas a {
	display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px;
	font: 500 15px/1 var(--sans); text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.jf .ja-pr-ctas a:active { transform: scale(.98); }
.jf .jf-cta-1 { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #ddd5c3; }
.jf .jf-cta-1:hover { background: #fbfaf7; box-shadow: inset 0 0 0 1px #cfc5ae; }
.jf .jf-cta-2 { background: #f1ebdd; color: #1f1d19; box-shadow: inset 0 0 0 1px #ddd5c3; }
.jf .jf-cta-2:hover { background: #ebe3d2; }

/* ---------- the wheel ----------
   An HTML frame: the lenses' ring as one SVG, a soft gradient for awareness, and
   each globe its own SVG, placed on the ring and turned with one transform. */
.jf-wheel { position: relative; margin: 0; aspect-ratio: 1; width: 100%; max-width: 620px; justify-self: center; container-type: inline-size; }
.jf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jf-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jf-arc { fill: none; stroke: var(--hue); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .92;
	transition: stroke-dashoffset 1.6s var(--jf-ease), opacity .4s ease; transition-delay: calc(var(--i) * .18s); }
.jf-wheel.is-in .jf-arc { stroke-dashoffset: 0; }
.jf-lens-t { font: 600 17px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--hue); opacity: 0; transition: opacity .8s ease; transition-delay: calc(.9s + var(--i) * .18s); }
.jf-wheel.is-in .jf-lens-t { opacity: 1; }

.jf-sphere { position: absolute; aspect-ratio: 1; border-radius: 50%; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
	opacity: 0; scale: .9; transition: opacity .9s var(--jf-ease), scale 1.1s var(--jf-ease); transition-delay: calc(var(--i) * 70ms + .1s); }
.jf-wheel.is-in .jf-sphere { opacity: 1; scale: 1; }
.jf-net { display: block; width: 100%; height: 100%; overflow: visible; animation: jfTurn var(--dur, 96s) linear infinite; }
.jf-net.is-back { animation-direction: reverse; }
.jf-rim { fill: none; stroke: var(--hue); stroke-opacity: .24; stroke-width: 1.1; }
.jf-net line { stroke: var(--hue); stroke-width: 1.05; }
.jf-net circle:not(.jf-rim) { fill: var(--hue); }
.jf-net circle.q { fill: #b6ad9c; }
.jf-net circle[style] { animation: jfTwinkle 4.8s ease-in-out infinite; animation-delay: calc(var(--tw) * -1s); }
@keyframes jfTurn { to { rotate: 360deg; } }
@keyframes jfTwinkle { 50% { opacity: .3; } }

.jf-centre { position: absolute; left: 35%; top: 35%; width: 30%; aspect-ratio: 1; mix-blend-mode: multiply; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .5s; }
.jf-wheel.is-in .jf-centre { opacity: 1; }
.jf-blob { position: absolute; inset: -4%; border-radius: 50%; filter: blur(9px);
	background: radial-gradient(circle at 44% 40%, rgba(201, 149, 80, .92) 0%, rgba(194, 102, 138, .8) 50%, rgba(142, 114, 204, .44) 78%, rgba(142, 114, 204, 0) 100%);
	animation: jfBreathe 9s ease-in-out infinite; }
.jf-blob-2 { inset: 4%; filter: blur(8px); background: radial-gradient(circle at 62% 64%, rgba(214, 160, 92, .74), rgba(200, 112, 146, .46) 58%, rgba(200, 112, 146, 0) 100%);
	transform-origin: 46% 46%; animation: jfDrift 17s linear infinite; }
@keyframes jfBreathe { 50% { scale: 1.06; } }
@keyframes jfDrift { to { rotate: 360deg; } }

.jf-labels { position: absolute; inset: 0; pointer-events: none; }
.jf-label { position: absolute; translate: -50% -50%; font: 700 14px/1 var(--sans); font-size: clamp(10px, 2.3cqw, 15px); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	color: #3f3c36; text-shadow: 0 0 5px #f6f3eb, 0 0 2px #f6f3eb, 0 0 1px #f6f3eb; opacity: 0; transition: opacity .8s ease .6s, color .3s ease; }
.jf-wheel.is-in .jf-label { opacity: 1; }
.jf-label-c { left: 50%; top: 50%; font-size: clamp(11px, 2.5cqw, 16px); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 8px rgba(80, 40, 30, .35); }

/* one dimension in focus: it lifts, the rest step back */
.jf-wheel.has-on .jf-sphere:not(.is-on) { opacity: .24; }
.jf-wheel.has-on .jf-label:not(.is-on):not(.jf-label-c) { opacity: .3; }
.jf-wheel.has-on .jf-centre { opacity: .5; }
.jf-wheel .jf-sphere.is-on { scale: 1.05; z-index: 2; }
.jf-sphere:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hue); }

/* the card a dimension opens */
.jf-tip {
	position: absolute; z-index: 3; width: min(300px, 80%); padding: 16px 18px 14px; border-radius: 18px; background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(40, 34, 22, .06), 0 24px 50px -22px rgba(60, 45, 15, .35);
	opacity: 0; translate: 0 6px; scale: .98; transition: opacity .18s ease, translate .32s var(--jf-ease), scale .32s var(--jf-ease); pointer-events: none;
}
.jf-tip.is-on { opacity: 1; translate: 0 0; scale: 1; }
.jf-tip-h { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font: 600 16px/1.25 var(--sans); color: var(--ink); }
.jf-tip-h i { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); flex: none; }
.jf-tip-l { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--ink-mute); }
.jf-tip dl { margin: 0; display: grid; gap: 6px; }
.jf-tip dl div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 13px; line-height: 1.4; }
.jf-tip dt { font-weight: 600; color: var(--lens); }
.jf-tip dd { margin: 0; color: #2b2a27; }

/* ---------- figures in the body ---------- */
.jf-fig { margin: 34px 0 40px; }
.ja-prose .jf-fig p { margin: 0; }
[data-jf-reveal] > * { opacity: 0; translate: 0 14px; transition: opacity .7s ease, translate .9s var(--jf-ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-jf-reveal].is-in > * { opacity: 1; translate: 0 0; }

/* the three lenses */
.jf-lenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jf-lens-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; border-radius: 18px; background: var(--bg-card-soft); box-shadow: inset 0 0 0 1px var(--line); }
.jf-lens-card .jf-kicker { font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hue); margin: 4px 0 2px !important; }
.jf-lens-card b { font: 500 20px/1.2 var(--serif); color: var(--ink); }
.jf-lens-card > p { font-size: 15px; line-height: 1.5; color: #2b2a27; }
.jf-lens-card .jf-how { font-size: 13.5px; color: var(--ink-mute); }
.jf-demo { height: 132px; margin-bottom: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 12px; overflow: hidden; position: relative; }
.jf-bub { display: inline-block; max-width: 86%; padding: 7px 11px; border-radius: 15px; background: #ebe8e1; font-size: 12.5px; line-height: 1.38; color: #1d1d1b; }
.jf-bub.jf-me { position: absolute; right: 12px; bottom: 12px; background: #2f8f5b; color: #fff; padding: 6px 12px; opacity: 0; translate: 0 8px; transition: opacity .4s ease, translate .5s var(--jf-ease); }
.jf-lenses.is-in .jf-bub.jf-me { opacity: 1; translate: 0 0; transition-delay: 1.1s; }
.jf-demo-q { font: 600 13px/1 var(--sans); color: var(--ink); margin: 6px 0 14px !important; }
.jf-scale { display: flex; justify-content: space-between; gap: 4px; }
.jf-scale i { flex: 1; height: 30px; display: grid; place-items: center; border-radius: 9px; font: 600 12.5px/1 var(--sans); font-style: normal; color: var(--ink-mute); background: var(--bg-card-soft); transition: background-color .3s ease, color .3s ease, scale .4s var(--jf-ease); }
.jf-lenses.is-in .jf-scale i.is-pick { background: var(--hue); color: #fff; scale: 1.08; transition-delay: 1.3s; }
.jf-demo-ends { display: flex; justify-content: space-between; margin-top: 8px !important; font-size: 11px; color: var(--ink-soft); }
.jf-check { display: flex; align-items: center; gap: 10px; padding: 9px 4px; font-size: 13px; color: #2b2a27; }
.jf-check + .jf-check { border-top: 1px solid var(--line); }
.jf-box { width: 18px; height: 18px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #cfc5ae; position: relative; transition: background-color .3s ease, box-shadow .3s ease; }
.jf-box::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; scale: 0; transition: scale .3s var(--jf-ease); }
.jf-lenses.is-in .jf-check .jf-box { background: var(--hue); box-shadow: none; transition-delay: 1.2s; }
.jf-lenses.is-in .jf-check .jf-box::after { scale: 1; transition-delay: 1.3s; }
.jf-lenses.is-in .jf-check.is-done .jf-box, .jf-lenses.is-in .jf-check.is-done .jf-box::after { transition-delay: 1.9s; }

/* the eight dimensions */
.jf-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jf-dim { padding: 16px 16px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease, translate .3s var(--jf-ease); }
.jf-dim:hover { box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -20px rgba(60, 45, 15, .35); }
.jf-dim-h { display: flex; align-items: center; gap: 9px; }
.jf-dim-h i { width: 10px; height: 10px; border-radius: 50%; background: var(--hue, #a7743a); flex: none; }
.jf-dim-h b { font: 600 16px/1.2 var(--sans); color: var(--ink); }
.jf-dim-line { margin: 6px 0 10px !important; font-size: 14.5px; line-height: 1.45; color: #2b2a27; }
.jf-dim dl { margin: 0; display: grid; gap: 5px; }
.jf-dim dl div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; font-size: 13px; line-height: 1.4; }
.jf-dim dt { font-weight: 600; color: var(--lens); }
.jf-dim dd { margin: 0; color: var(--ink-mute); }
.jf-dim-c { grid-column: 1 / -1; background: linear-gradient(120deg, #fbf3e4, #f6ecf0 60%, #f1ecf8); box-shadow: inset 0 0 0 1px #eadfd0; }
.jf-dim-c .jf-dim-h i { background: linear-gradient(135deg, #a7743a, #a9586e 60%, #7556b0); }
.jf-dim-body { font-size: 14px; line-height: 1.5; color: var(--ink-mute); }

/* where each type starts: a tab per type; its spheres light in order on a small
   wheel, each joined to the next, beside the same steps in words */
.jf-chains { --s: 1.15s; --dwell: 8.5s; }
.jf-ch-card { border-radius: 22px; background: linear-gradient(160deg, #fbf8f1, #f3eee3); padding: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.jf-ch-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--line); }
.jf-ch-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 10px 4px 13px; border: 0; border-radius: 12px; background: none;
	font: 500 13px/1 var(--sans); color: var(--ink-mute); cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.jf-ch-tab:hover { color: var(--ink); background: rgba(255, 255, 255, .75); }
.jf-ch-tab.is-active { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(40, 34, 22, .06), 0 8px 18px -12px rgba(60, 45, 15, .4); }
.jf-ch-tab:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.jf-ch-tab:active { scale: .98; }
/* the illustration has its name set along its foot; the frame shows the figure and leaves the name out */
.jf-ch-pic { width: 44px; height: 36px; flex: none; overflow: hidden; border-radius: 11px; box-shadow: 0 0 0 1px rgba(40, 34, 22, .08); }
.jf-ch-pic img { display: block; width: 52px; height: 52px; max-width: none; margin: -3px 0 0 -4px; filter: saturate(.6); opacity: .8; transition: filter .3s ease, opacity .3s ease; }
.jf-ch-tab:hover .jf-ch-pic img, .jf-ch-tab.is-active .jf-ch-pic img { filter: none; opacity: 1; }
.jf-ch-tab-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the time left on a type while they play one after another */
.jf-ch-bar { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(74, 90, 31, .12); opacity: 0; transition: opacity .3s ease; }
.jf-ch-bar::after { content: ""; position: absolute; inset: 0; background: var(--olive); transform-origin: 0 50%; scale: 0 1; }
.jf-chains.is-auto .jf-ch-tab.is-active .jf-ch-bar { opacity: 1; }
.jf-chains.is-auto.is-play .jf-ch-tab.is-active .jf-ch-bar::after { animation: jfChBar var(--dwell) linear both; }
.jf-chains.is-held .jf-ch-bar::after { animation-play-state: paused; }

.jf-ch-body { display: grid; grid-template-columns: minmax(0, 286px) minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 14px 14px 8px; }
.jf-ch-wheel svg { display: block; width: 100%; height: auto; overflow: visible; }
.jf-ch-ring { fill: none; stroke: #d6cdb9; stroke-width: 3; stroke-dasharray: .1 15; stroke-linecap: round; }
.jf-ch-aw { transform-box: fill-box; transform-origin: center; animation: jfBreathe 9s ease-in-out infinite; }
.jf-ch-aw-t { font: 700 31px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; fill: #fff;
	paint-order: stroke; stroke: rgba(184, 104, 128, .32); stroke-width: 6px; stroke-linejoin: round; }
.jf-ch-base { fill: var(--hue); fill-opacity: .1; stroke: var(--hue); stroke-opacity: .3; stroke-width: 3; }
.jf-ch-g { display: none; }
.jf-ch-g.is-active { display: inline; }
.jf-ch-link { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.jf-ch-head { fill: var(--hue); }
.jf-ch-lit { transform-box: fill-box; transform-origin: center; }
.jf-ch-dot { fill: var(--hue); }
.jf-ch-num { font: 600 52px/1 var(--sans); text-anchor: middle; fill: #fff; }
.jf-ch-halo { fill: var(--hue); opacity: 0; transition: opacity .25s ease; }
.jf-ch-ping { fill: none; stroke: var(--hue); stroke-width: 6; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* every panel shares one cell, so the tallest sets the height and changing type never
   moves the page (a hidden one keeps its room: article.css hides [hidden] outright) */
.jf-ch-panels { display: grid; }
.jf-ch-panel { grid-area: 1 / 1; min-width: 0; }
.ja .jf-ch-panel[hidden] { display: block !important; visibility: hidden; }
.ja-prose .jf-chains .jf-ch-name { margin: 0 0 6px; font: 500 26px/1.15 var(--serif); color: var(--ink); }
.ja-prose .jf-chains .jf-ch-first, .ja-prose .jf-chains .jf-ch-watch { font-size: 14.5px; line-height: 1.5; color: #2b2a27; }
.ja-prose .jf-chains .jf-ch-first { margin: 0 0 14px; }
.ja-prose .jf-chains .jf-ch-watch { margin: 14px 0 0; color: var(--ink-mute); }
.jf-ch-first b, .jf-ch-watch b { display: block; margin: 0 0 5px; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.jf-ch-first b { color: var(--olive); }
.jf-ch-watch b { color: #94582c; }
.ja-prose .jf-chains .jf-ch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ja-prose .jf-chains .jf-ch-step { margin: 0; display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 9px 10px 9px 11px; border-radius: 14px; background: #fff;
	box-shadow: 0 0 0 1px rgba(40, 34, 22, .05), 0 8px 20px -16px rgba(60, 45, 15, .3); font-size: 15px; line-height: 1.3; color: var(--ink); transition: box-shadow .25s ease; }
.ja-prose .jf-chains .jf-ch-step:hover { box-shadow: 0 0 0 1px rgba(40, 34, 22, .1), 0 10px 22px -14px rgba(60, 45, 15, .35); }
.jf-ch-t { flex: 1; min-width: 0; }
.jf-ch-step .jf-tag { flex: none; }
.jf-ch-badge { position: relative; width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hue); color: #fff; }
.jf-ch-badge b { font: 600 12.5px/1 var(--sans); color: inherit; }
.jf-ch-badge .jf-dots { position: absolute; left: 4px; top: 4px; opacity: 0; animation: none; }
/* pointing at a step lights its sphere on the wheel */
.jf-chains:has(.jf-ch-step[data-k="0"]:hover) .jf-ch-g.is-active .jf-ch-lit[data-k="0"] .jf-ch-halo,
.jf-chains:has(.jf-ch-step[data-k="1"]:hover) .jf-ch-g.is-active .jf-ch-lit[data-k="1"] .jf-ch-halo,
.jf-chains:has(.jf-ch-step[data-k="2"]:hover) .jf-ch-g.is-active .jf-ch-lit[data-k="2"] .jf-ch-halo,
.jf-chains:has(.jf-ch-step[data-k="3"]:hover) .jf-ch-g.is-active .jf-ch-lit[data-k="3"] .jf-ch-halo { opacity: .2; }

/* playing (framework.js): each step works (its dots turn), then lands (its sphere lights
   and its badge fills), and a line runs on to the next sphere */
.jf-chains.is-play .jf-ch-panel:not([hidden]) .jf-ch-name,
.jf-chains.is-play .jf-ch-panel:not([hidden]) .jf-ch-first { animation: jfChIn .5s var(--jf-ease) both; }
.jf-chains.is-play .jf-ch-panel:not([hidden]) .jf-ch-first { animation-delay: .06s; }
.jf-chains.is-play .jf-ch-panel:not([hidden]) .jf-ch-watch { animation: jfChIn .6s var(--jf-ease) both; animation-delay: calc(4 * var(--s)); }
.jf-chains.is-play .jf-ch-step { animation: jfChIn .5s var(--jf-ease) both; animation-delay: calc(var(--k) * var(--s) + .15s); }
.jf-chains.is-play .jf-ch-badge { animation: jfChBadge .35s ease both; animation-delay: calc(var(--k) * var(--s) + .8s); }
.jf-chains.is-play .jf-ch-badge .jf-dots { animation: jfDotsTurn 7.2s infinite, jfChOut .25s ease both; animation-delay: 0s, calc(var(--k) * var(--s) + .75s); }
.jf-chains.is-play .jf-ch-lit { animation: jfChPop .6s var(--jf-ease) both; animation-delay: calc(var(--k) * var(--s) + .8s); }
.jf-chains.is-play .jf-ch-ping { animation: jfChPing 1.1s ease-out forwards; animation-delay: calc(var(--k) * var(--s) + .8s); }
.jf-chains.is-play .jf-ch-link { animation: jfChDraw .5s cubic-bezier(.45, 0, .25, 1) both; animation-delay: calc(var(--k) * var(--s) + 1.05s); }
.jf-chains.is-play .jf-ch-head { animation: jfChFade .2s ease both; animation-delay: calc(var(--k) * var(--s) + 1.45s); }
/* armed before it scrolls into view: every animation inside held at its start (not the
   figure's own: site-motion.js fades and lifts the figure in as it arrives) */
.jf-chains.is-paused *, .jf-chains.is-paused *::after { animation-play-state: paused !important; }
@keyframes jfChIn { from { opacity: 0; translate: 0 8px; } }
@keyframes jfChFade { from { opacity: 0; } }
@keyframes jfChOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes jfChBadge { from { background-color: #fff; box-shadow: inset 0 0 0 1.5px #ddd5c3; color: transparent; } }
@keyframes jfChPop { from { opacity: 0; scale: .5; } }
@keyframes jfChPing { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.55; } }
@keyframes jfChDraw { from { stroke-dashoffset: 1; } }
@keyframes jfChBar { to { scale: 1 1; } }

/* the rule */
.jf-rule ol { list-style: none; margin: 0; padding: 0; counter-reset: jf; display: grid; gap: 10px; }
.jf-rule li { counter-increment: jf; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline;
	padding: 14px 16px; border-radius: 14px; background: var(--bg-card-soft); box-shadow: inset 0 0 0 1px var(--line); }
.jf-rule li::before { content: counter(jf); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
	font: 600 13px/1 var(--sans); color: #fff; background: var(--olive); align-self: start; }
.jf-rule li b { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.jf-rule li span { font-size: 15px; line-height: 1.5; color: var(--ink-mute); }

/* the sources */
.jf-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ja-prose a.jf-src { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
	text-decoration: none; color: inherit; transition: box-shadow .3s ease, translate .3s var(--jf-ease); }
.ja-prose a.jf-src:hover { box-shadow: inset 0 0 0 1px #d5cfc2, 0 14px 30px -20px rgba(60, 45, 15, .35); translate: 0 -2px; }
.jf-src-l { font: 600 15px/1.25 var(--sans); color: var(--ink); }
.jf-src-m { font-size: 14px; line-height: 1.5; color: #2b2a27; }
.jf-src-t { font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.jf-src-t b { color: var(--olive); font-weight: 600; }
.jf-src-c { font-size: 12px; line-height: 1.45; color: var(--ink-soft); }

/* the stories */
.jf-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ja-prose a.jf-story { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
	text-decoration: none; color: inherit; transition: box-shadow .3s ease, translate .3s var(--jf-ease); }
.ja-prose a.jf-story:hover { box-shadow: inset 0 0 0 1px #d5cfc2, 0 18px 36px -22px rgba(60, 45, 15, .4); translate: 0 -2px; }
.jf-story img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.jf-story-t { display: flex; flex-direction: column; gap: 2px; }
.jf-story-t b { font: 600 16px/1.2 var(--sans); color: var(--ink); }
.jf-story-t span { font-size: 13px; color: var(--ink-mute); }
.jf-story-d { font-size: 14px; line-height: 1.5; color: #2b2a27; flex: 1; }
.jf-story-p { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--sans); color: var(--olive); }
.jf-story-p svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- the working mark (the same as Ask Journey's): seven dots that turn a sixth at a time ---------- */
.jf-dots { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; color: var(--ink); animation: jfDotsTurn 7.2s infinite; }
.jf-dots i { position: absolute; left: 50%; top: 50%; width: 3.2px; height: 3.2px; margin: -1.6px 0 0 -1.6px; border-radius: 50%; background: currentColor;
	animation: jfDotsSwell 1.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.2s); }
.jf-dots i:nth-child(1) { translate: 0 -5.6px; --k: 0; } .jf-dots i:nth-child(2) { translate: 4.85px -2.8px; --k: 1; }
.jf-dots i:nth-child(3) { translate: 4.85px 2.8px; --k: 2; } .jf-dots i:nth-child(4) { translate: 0 5.6px; --k: 3; }
.jf-dots i:nth-child(5) { translate: -4.85px 2.8px; --k: 4; } .jf-dots i:nth-child(6) { translate: -4.85px -2.8px; --k: 5; }
.jf-dots i:nth-child(7) { animation: none; }
@keyframes jfDotsTurn {
	0% { rotate: 0deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
	8.333%, 16.667% { rotate: 60deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
	25%, 33.333% { rotate: 120deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
	41.667%, 50% { rotate: 180deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
	58.333%, 66.667% { rotate: 240deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
	75%, 83.333% { rotate: 300deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
	91.667%, 100% { rotate: 360deg; }
}
@keyframes jfDotsSwell { 0%, 100% { scale: 1; } 50% { scale: .58; } }

/* ---------- a week in practice: an agent's task list, one student ---------- */
.jf-week-card { border-radius: 22px; background: linear-gradient(160deg, #fbf8f1, #f3eee3); padding: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.jf-week-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; }
.jf-week-head b { font: 500 18px/1 var(--sans); color: var(--ink); }
.jf-week-n { color: var(--olive); font-variant-numeric: tabular-nums; }
.jf-week-replay { margin-left: auto; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #ddd5c3;
	font: 500 13px/1 var(--sans); color: var(--ink); cursor: pointer; }
.jf-week-replay:hover { background: #fbfaf7; }
.jf-week.is-done .jf-week-head > .jf-dots { display: none; }
.ja-prose .jf-week-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ja-prose .jf-step { margin: 0; padding: 13px 14px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(40, 34, 22, .05), 0 8px 20px -16px rgba(60, 45, 15, .3);
	display: grid; gap: 9px; transition: opacity .5s ease, translate .6s var(--jf-ease), box-shadow .4s ease; }
.jf-week.is-playing .jf-step:not(.is-shown) { opacity: 0; translate: 0 10px; }
.jf-step-h { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.jf-step-t { flex: 1; white-space: pre-line; }
.jf-text { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans); }
.jf-state { position: relative; width: 18px; height: 18px; flex: none; margin-top: 2px; display: grid; place-items: center; }
.jf-state .jf-dots { position: absolute; inset: 1px; transition: opacity .25s ease, scale .3s var(--jf-ease); }
.jf-tick { position: absolute; inset: 0; width: 18px; height: 18px; fill: none; stroke: var(--olive); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0; transition: stroke-dashoffset .45s var(--jf-ease) .1s, opacity .2s ease; }
.jf-step.is-landed .jf-state .jf-dots { opacity: 0; scale: .6; }
.jf-step.is-landed .jf-tick { opacity: 1; stroke-dashoffset: 0; }
.jf-step.is-handoff { box-shadow: 0 0 0 1px rgba(74, 90, 31, .22), 0 8px 20px -16px rgba(60, 45, 15, .3); }
.jf-step-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 29px; }
.jf-who { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 3px; border-radius: 999px; background: var(--bg-card-soft);
	box-shadow: inset 0 0 0 1px var(--line); font: 500 12.5px/1 var(--sans); color: #2b2a27; }
.jf-who img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; background: #fff; }
.jf-who img.is-round { border-radius: 50%; object-position: 50% 18%; }
.jf-who-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #dfe8cf, #c9d8b8); }
.jf-who-i svg { width: 14px; height: 14px; fill: none; stroke: #4a5a1f; stroke-width: 1.8; stroke-linecap: round; }
.jf-when { font-size: 12.5px; color: var(--ink-soft); margin-right: 2px; font-variant-numeric: tabular-nums; }
.jf-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 8px; background: #fff;
	box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/1 var(--sans); color: #3f3c36; }
.jf-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--hue); }
.jf-tag-lens { background: var(--hue); color: #fff; box-shadow: none; }
.jf-tag-person { background: #eef2e4; color: var(--olive); box-shadow: inset 0 0 0 1px #d9e1c7; }
.jf-tag-learn { background: #f3eefa; color: #59418b; box-shadow: inset 0 0 0 1px #e2d8f1; }
.jf-week figcaption, .jf-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 1024px) {
	.ja-pr.jf .ja-pr-band-in { grid-template-columns: minmax(0, 1fr); }
	.jf-wheel { max-width: 520px; }
	.jf-stories { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.jf-lenses, .jf-dims, .jf-sources { grid-template-columns: minmax(0, 1fr); }
	.jf-step-m { padding-left: 0; }
	.jf-tip { width: calc(100% - 16px); }
	.jf-lens-t { font-size: 20px; }
	.jf-ch-body { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 6px 8px; }
	.jf-ch-wheel { width: min(250px, 74%); margin: 0 auto; }
	.jf-ch-tab { gap: 6px; padding: 8px 2px 12px; font-size: 11.5px; }
	.jf-ch-pic { width: 40px; height: 33px; }
	.jf-ch-pic img { width: 48px; height: 48px; margin: -3px 0 0 -4px; }
	.jf-ch-bar { left: 12px; right: 12px; }
}
@media (max-width: 420px) {
	.jf-ch-tab-n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jf-net, .jf-net circle[style], .jf-blob, .jf-dots, .jf-dots i, .jf-ch-aw { animation: none !important; }
	.jf-sphere, .jf-label, .jf-centre, .jf-lens-t, [data-jf-reveal] > * { opacity: 1; scale: 1; translate: 0 0; transition: none !important; }
	.jf-arc { stroke-dashoffset: 0; transition: none; }
}