/* ==========================================================================
   02 · THE METHODOLOGICAL PATHWAY — the interactive ring (built by
   pathway.js from the Movement groups) + the editor / no-script view.
   Translated from the reference design's .pathway / .weave / .panel rules.
   ========================================================================== */

.masm-pathway {
	--pathway-bg: #EFE5D0;
	--masm-paper: #F7F0E0;
	--masm-paper-deep: #EFE5D0;
	--masm-surface: #FDFAF2;
	--masm-ink: #11294B;
	--masm-ink-soft: #3B4E6E;
	--masm-ink-faint: #5F6779;
	--masm-rule: #D8CDB6;
	--masm-rust-ink: #94551F;
}
.masm-pathway.band-deep { background: var(--masm-paper-deep); }

/* ---- editor view (and the fallback if scripts are off): simple cards ---- */
.masm-pathway .pw-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 18px;
	margin-top: clamp(28px, 3.4vw, 44px);
}
.masm-pathway .pw-movement {
	background: var(--masm-paper);
	border: 1px solid var(--masm-rule);
	border-radius: 4px;
	padding: 14px 14px 18px;
}
.masm-pathway .pw-movement > * { margin: 0; }
.masm-pathway .pw-icon { margin: 0 0 10px; }
.masm-pathway .pw-icon img { width: 64px; height: 64px; display: block; }
.masm-pathway .pw-photo { margin: 0 0 12px; }
.masm-pathway .pw-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; display: block; }
.masm-pathway .pw-movement .pw-name { font-size: 22px; line-height: 1.1; margin: 0; }
.masm-pathway .pw-movement .pw-en {
	font-family: var(--masm-stamp);
	font-size: 12px;
	letter-spacing: .13em;
	color: var(--masm-rust-ink);
	margin: 4px 0 8px;
}
.masm-pathway .pw-movement .pw-desc { font-size: 15px; line-height: 1.55; color: var(--masm-ink-soft); }

/* on the live site the script replaces the cards with the ring */
.masm-js .masm-pathway .pw-items { display: none; }

/* ---- the ring + detail layout ---- */
.masm-pathway .pathway-grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(28px, 4.4vw, 72px);
	align-items: center;
	margin-top: clamp(28px, 3.4vw, 44px);
}

.masm-pathway .weave {
	position: relative;
	width: 100%;
	max-width: 490px;
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	container-type: inline-size;
}
.masm-pathway .weave-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.masm-pathway .weave-ring { fill: none; stroke: var(--masm-rule); stroke-width: .3; }
.masm-pathway .weave-flow {
	fill: none;
	stroke: var(--c);
	stroke-width: .75;
	stroke-linecap: round;
	stroke-dasharray: 0 2.5;
	opacity: .5;
	transition: stroke .45s;
	animation: masm-flow 48s linear infinite;
}
@keyframes masm-flow { to { stroke-dashoffset: -100; } }
.masm-pathway .chord {
	fill: none;
	stroke: var(--masm-rule);
	stroke-width: .3;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 1.3s cubic-bezier(.35, .8, .35, 1) var(--d, 0s), stroke .45s, stroke-width .45s, opacity .45s;
}
.masm-pathway .weave.is-drawn .chord { stroke-dashoffset: 0; }
.masm-pathway .chord.on { stroke: var(--c); stroke-width: .55; }
.masm-pathway .chord.hot { stroke-width: .85; }

.masm-pathway .weave-core {
	position: absolute;
	left: 50%;
	top: 47%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	line-height: 1;
}
.masm-pathway .core-lbl {
	font-family: var(--masm-stamp);
	font-size: clamp(8.5px, 2.1cqw, 11px);
	letter-spacing: .18em;
	color: var(--masm-ink-faint);
	margin-bottom: 6px;
}
.masm-pathway .core-no {
	font-family: var(--masm-serif);
	font-weight: 500;
	font-size: clamp(26px, 8.4cqw, 44px);
	letter-spacing: -.03em;
	color: var(--c-ink);
	transition: color .4s;
}

.masm-pathway .movements { position: absolute; inset: 0; }
.masm-pathway .mv {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 16%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--masm-ink-soft);
	cursor: pointer;
	border-radius: 50%;
}
.masm-pathway .mv-node {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--pathway-bg);
	box-shadow: 0 0 0 5px var(--pathway-bg);
	transition: transform .34s cubic-bezier(.2, .8, .3, 1), box-shadow .3s;
}
.masm-pathway .mv-node::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid var(--c);
	opacity: 0;
	pointer-events: none;
}
.masm-pathway .mv-node img {
	width: 100%;
	height: 100%;
	max-width: none;
	filter: saturate(.6);
	opacity: .55;
	transition: filter .34s, opacity .34s;
}
.masm-pathway .mv:hover .mv-node,
.masm-pathway .mv.is-hot .mv-node { transform: scale(1.06); }
.masm-pathway .mv:hover .mv-node img,
.masm-pathway .mv.is-hot .mv-node img { filter: saturate(.9); opacity: .92; }
.masm-pathway .mv[aria-selected="true"] .mv-node {
	transform: scale(1.12);
	box-shadow: 0 0 0 3px var(--c), 0 0 0 9px var(--pathway-bg), 0 18px 32px -22px rgba(17, 41, 75, .9);
}
.masm-pathway .mv[aria-selected="true"] .mv-node img {
	filter: none;
	opacity: 1;
	animation: masm-bloom .58s cubic-bezier(.2, .8, .3, 1), masm-breathe 3.8s ease-in-out .58s infinite;
}
.masm-pathway .mv[aria-selected="true"] .mv-node::after { animation: masm-ripple 2.6s cubic-bezier(.2, .7, .4, 1) infinite; }
.masm-pathway .mv:focus-visible { outline: 2px solid var(--c); outline-offset: 6px; }
.masm-pathway .mv-label {
	position: absolute;
	left: 50%;
	top: calc(100% + 9px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
	line-height: 1.15;
	padding: 2px 8px 3px;
	border-radius: 4px;
	background: var(--pathway-bg);
}
.masm-pathway .mv-name { font-family: var(--masm-serif); font-size: clamp(14.5px, 3.7cqw, 18.5px); color: var(--masm-ink); }
.masm-pathway .mv-en {
	font-family: var(--masm-stamp);
	font-size: clamp(9.5px, 2.3cqw, 11.5px);
	letter-spacing: .12em;
	color: var(--masm-ink-faint);
	margin-top: 3px;
	transition: color .3s;
}
.masm-pathway .mv[aria-selected="true"] .mv-en { color: var(--c-ink); }

.masm-pathway .weave:not(.is-drawn) .mv { opacity: 0; }
.masm-pathway .weave.is-drawn .mv { animation: masm-mv-in .62s cubic-bezier(.2, .8, .3, 1) backwards; }
.masm-pathway .weave.is-drawn .mv:nth-child(1) { animation-delay: .12s; }
.masm-pathway .weave.is-drawn .mv:nth-child(2) { animation-delay: .24s; }
.masm-pathway .weave.is-drawn .mv:nth-child(3) { animation-delay: .36s; }
.masm-pathway .weave.is-drawn .mv:nth-child(4) { animation-delay: .48s; }
.masm-pathway .weave.is-drawn .mv:nth-child(5) { animation-delay: .60s; }
.masm-pathway .weave.is-drawn .mv:nth-child(n+6) { animation-delay: .72s; }
@keyframes masm-mv-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes masm-bloom { 0% { transform: scale(.84); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes masm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes masm-ripple { 0% { transform: scale(1); opacity: .5; } 65% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---- detail card ---- */
.masm-pathway .panel[hidden] { display: none; }
.masm-pathway .panel {
	background: var(--masm-paper);
	border: 1px solid var(--masm-rule);
	border-radius: 4px;
	padding: clamp(14px, 1.5vw, 18px);
	box-shadow: 0 34px 70px -58px rgba(17, 41, 75, .9);
}
.masm-pathway .panel.fade { animation: masm-panel-in .45s cubic-bezier(.2, .7, .3, 1); }
@keyframes masm-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.masm-pathway .shot { margin: 0; position: relative; }
.masm-pathway .shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 45%;
	border-radius: 3px;
	display: block;
}
.masm-pathway .panel-copy { padding: clamp(16px, 1.8vw, 24px) clamp(6px, 1vw, 12px) 4px; }
.masm-pathway .stage-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.masm-pathway .panel-copy h3 {
	font-family: var(--masm-serif);
	font-weight: 500;
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--masm-ink);
	margin: 0;
}
.masm-pathway .panel-copy .trans { font-family: var(--masm-stamp); font-size: 13px; letter-spacing: .13em; color: var(--c-ink); }
.masm-pathway .stage-desc {
	font-size: clamp(16.5px, 1.25vw, 18px);
	line-height: 1.58;
	color: var(--masm-ink-soft);
	max-width: 46ch;
	margin: 0;
}
.masm-pathway .links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--masm-rule);
}
.masm-pathway .links-lbl { font-family: var(--masm-stamp); font-size: 11px; letter-spacing: .15em; color: var(--masm-ink-faint); margin-right: 4px; }
.masm-pathway .link-chip {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--masm-ink-soft);
	border: 1px solid var(--masm-rule);
	border-radius: 999px;
	padding: 5px 12px 5px 10px;
	transition: border-color .25s, color .25s, background .25s;
}
.masm-pathway .link-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.masm-pathway .link-chip:hover { border-color: var(--k); color: var(--masm-ink); background: var(--masm-surface); }

.masm-pathway .panel-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: clamp(14px, 1.6vw, 20px);
}
.masm-pathway .pnav {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	cursor: pointer;
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px;
	color: var(--masm-ink-soft);
	border: 1px solid var(--masm-rule);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.62;
	transition: color .25s, border-color .25s, background .25s;
}
.masm-pathway .pnav:hover { color: var(--masm-ink); border-color: var(--masm-rust-ink); background: var(--masm-paper); }
.masm-pathway .pnav .ar { font-family: var(--masm-sans); color: var(--masm-rust-ink); }
.masm-pathway .pnav-count {
	order: -1;
	margin-right: auto;
	font-family: var(--masm-stamp);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--masm-ink-faint);
}
.masm-pathway .pnav-count b { color: var(--masm-ink); font-weight: 500; }

/* ---- closing note ---- */
.masm-pathway .thread-note {
	margin: clamp(24px, 2.6vw, 34px) 0 0;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--masm-ink-faint);
	display: flex;
	gap: 12px;
	align-items: flex-start;
	max-width: 66ch;
}
.masm-pathway .thread-note::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 1.5px;
	background: var(--masm-rule);
	margin-top: 12px;
}

@media (max-width: 860px) {
	.masm-pathway .pathway-grid { grid-template-columns: 1fr; gap: 26px; }
	.masm-pathway .weave { max-width: 400px; }
	.masm-pathway .panel { padding: 12px 12px 16px; }
	.masm-pathway .panel-copy { padding: 18px 4px 2px; }
	.masm-pathway .panel-nav { justify-content: space-between; }
	.masm-pathway .pnav-count { margin-right: 0; width: 100%; order: -1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.masm-pathway .chord { stroke-dashoffset: 0; }
	.masm-pathway .weave:not(.is-drawn) .mv { opacity: 1; }
	.masm-pathway * { animation: none !important; }
}