/* =========================================================================
   netex · pages/marketing-shared.css · components shared by the Marketing pillar
   (hub, Strategy Lab, Frame Hunt, AI Visibility, Performance). Role tokens only.
   Register: Paper-led, INK dialect (springy, fluid), FLAR 60/VOLM 40 section displays.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- type ------------------------------------------------------------------ */
.mk-display { --flar: 60; --volm: 40; }
.mk-display--full { --flar: 100; --volm: 100; }
.mk-h1 { display: grid; gap: 0; }
.mk-h1__l1 { display: block; --flar: 100; --volm: 100; font-variation-settings: "FLAR" var(--flar), "VOLM" var(--volm); }
.mk-h1 .nx-h1-sub { max-width: 34ch; }
/* Phones: lib/cut.js slips the B-half 4 px along the cut. On a 34 px phone headline that is ~12 % of a glyph and
   reads as a misprint («problern», «usua lly»), so below 768 px the halves register exactly; the colour still
   changes on the 47° line. (Both halves are FLAR 100 here, so no letter-spacing correction is involved.) */
@media (max-width: 767px) {
	.mk-h1 .cut__b, .fh-title .cut__b, .mh-thesis__title .cut__b { transform: none !important; }
}
.mk-lead { max-width: var(--measure-lead); }

/* ---- small labels: source chip, flags ---------------------------------------------- */
.mk-src {
	display: inline;
	color: var(--fg-2);
	font: 500 .6875rem/1.5 var(--f-mono);
	letter-spacing: .03em;
	text-decoration: none;
}
a.mk-src { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (hover: hover) { a.mk-src:hover { text-decoration-thickness: 2px; } }
.mk-srcline { margin-top: var(--s-2); }
.mk-flag {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 1px 6px;
	border: var(--bw) solid var(--fg-3);
	color: var(--fg-2);
	font: 500 .625rem/1.3 var(--f-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	max-width: 100%;
	vertical-align: middle;
}
.mk-flag--sig { border-color: var(--sig); color: var(--sig); }
.mk-sym {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	padding: 1px 5px;
	border: var(--bw) solid currentColor;
	font: 600 .75rem/1.35 var(--f-mono);
	letter-spacing: .02em;
	text-decoration: none;
	color: inherit;
}

/* ---- drawing register ---------------------------------------------------------- */
.mk-art { display: block; width: 100%; height: auto; color: var(--line-art); overflow: visible; }
.mk-art .mk-sig { color: var(--sig); stroke: var(--sig); }
.mk-art .mk-leak { color: var(--leak); stroke: var(--leak); }
.mk-art .mk-fill-leak { fill: var(--molten); stroke: none; }
.mk-art .mk-fill-sig { fill: var(--sig); stroke: none; }
.mk-art__txt { fill: currentColor; stroke: none; font: 500 13px/1 var(--f-mono); letter-spacing: .02em; }
.mk-art__txt--lg { font-size: 18px; font-weight: 600; }

/* Draw-on (pathLength=1): start hidden, .is-drawn is the drawn end state; reduced motion and no-JS = drawn.
   The state travels as an inherited custom property; the motion itself is a Web Animation on each path
   (pages/marketing-shared.js), because Chrome does not always repaint SVG strokes for an inherited change. */
.mk-draw { --mk-off: 1; }
.mk-draw.is-drawn, html.rm .mk-draw, html:not(.js) .mk-draw { --mk-off: 0; }
.mk-draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: var(--mk-off); }

/* ---- spec list (guardrails, rules) ---------------------------------------------------- */
.mk-spec { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.mk-spec > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-1) var(--s-5);
	padding: var(--s-4) 0;
	border-top: var(--bw) solid var(--rule);
	font-size: var(--t-body);
	line-height: 1.5;
}
.mk-spec__src { font: 500 .6875rem/1.5 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); }
@media (min-width: 768px) {
	.mk-spec > li { grid-template-columns: minmax(0, 1fr) 14rem; align-items: baseline; }
	/* A rule without a source keeps the full measure (no empty source column squeezing the text). */
	.mk-spec > li:not(:has(> .mk-spec__src)) { grid-template-columns: minmax(0, 1fr); }
	.mk-spec__src { text-align: right; }
}
.mk-spec > li > span:first-child { max-width: 64ch; }

/* ---- the game in words: on demand with JS, always visible without it (the no-JS note points to it) --- */
html:not(.js) :is(.mh-words, .fh-words) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: var(--s-5); background: var(--bg-2); max-width: var(--measure); }
html:not(.js) :is(.mh-words__toggle, .fh-below [data-text-toggle]) { display: none; }
.mh-words.is-visible { margin-top: var(--s-2); }
.mh-words__toggle { justify-self: start; }

/* ---- sections: a tight section never loses its last line under the next section's 47° notch -------- */
.nx-section--tight:has(+ .nx-section.ch-tl) { padding-bottom: max(var(--sec-y-tight), calc(var(--ch-v) + var(--s-6))); }

/* ---- the 47° staircase timeline (lineage) ------------------------------------------------ */
.mk-timeline { --step: 44px; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-6); counter-reset: none; }
.mk-timeline__node { position: relative; padding: var(--s-4) 0 0 var(--s-5); border-left: var(--bw) solid var(--rule); }
.mk-timeline__node::before {
	content: "";
	position: absolute;
	left: -4px;
	top: calc(var(--s-4) + .35em);
	width: 7px;
	height: 7px;
	background: var(--fg);
	clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}
.mk-timeline__year { display: block; font: 600 .8125rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); min-height: 1.3em; }
.mk-timeline__who { margin-top: var(--s-2); font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; max-width: 24ch; }
.mk-timeline__what { margin-top: var(--s-2); max-width: 40ch; color: var(--fg); font-size: var(--t-small); line-height: 1.5; }
.mk-timeline__result { margin-top: var(--s-2); max-width: 40ch; font: 500 .8125rem/1.45 var(--f-mono); color: var(--fg); }
.mk-timeline__meta { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.mk-timeline__node.is-ours .mk-timeline__who { color: var(--fg); }
.mk-timeline__node.is-ours { border-left-color: var(--cyan); }
.mk-timeline__node.is-ours::before { background: var(--cyan); }
@media (min-width: 1024px) {
	.mk-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gutter); align-items: start; padding-top: calc(var(--step) * 3); }
	.mk-timeline__node { border-left: 0; padding: var(--s-5) var(--s-4) 0 0; border-top: var(--bw) solid var(--rule); }
	.mk-timeline__node:nth-child(1) { margin-top: 0; }
	.mk-timeline__node:nth-child(2) { margin-top: calc(var(--step) * -1); }
	.mk-timeline__node:nth-child(3) { margin-top: calc(var(--step) * -2); }
	.mk-timeline__node:nth-child(4) { margin-top: calc(var(--step) * -3); }
	/* the riser: a 47° segment climbing to the next step */
	.mk-timeline__node + .mk-timeline__node::after {
		content: "";
		position: absolute;
		left: calc(var(--gutter) * -1 - var(--step) * .9325);
		top: -1px;
		width: calc(var(--step) * 1.3673);
		height: 1px;
		background: var(--rule);
		transform-origin: 0 0;
		transform: translateY(var(--step)) rotate(-47deg);
	}
	.mk-timeline__node::before { left: 0; top: -4px; }
	.mk-timeline__node.is-ours { border-top-color: var(--cyan); }
	.mk-timeline__node.is-ours { padding: var(--s-5) var(--s-5) var(--s-5); background: var(--indigo); color: var(--paper); --fg: var(--paper); --fg-2: var(--paper-78i); --fg-3: var(--paper-78i); --rule: rgb(241 238 230 / .2); }
}

/* ---- index + viewer with folds (Frame Hunt adapt, Lab idea cards) ---------------------- */
.mk-iv { display: grid; gap: var(--gutter); }
.mk-iv__list { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.mk-iv__viewer { display: none; }
/* Phones: the rows carry 72 px AI-image thumbnails (the viewer is hidden), so the list carries one AI label
   for them, as the Lab's sliver strip does (AI Act Art. 50; bible R7). */
.mk-iv__ai { margin: calc(-1 * var(--gutter) + var(--s-3)) 0 0; }
.mk-iv__ai .nx-ailabel { position: static; }
.mk-fold { border-top: var(--bw) solid var(--rule); }
.mk-fold__sum {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 18px;
	grid-template-areas: "thumb meta sign" "thumb title sign";
	align-items: center;
	gap: 2px var(--s-4);
	min-height: 88px;
	padding: var(--s-3) 0;
	list-style: none;
	cursor: pointer;
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.mk-fold__sum::-webkit-details-marker { display: none; }
.mk-fold__thumb { grid-area: thumb; width: 72px; height: 72px; overflow: hidden; clip-path: var(--clip-ui); }
.mk-fold__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-fold__meta { grid-area: meta; align-self: end; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
/* Mechanic symbols are part numbers: their case is part of the name (Lv, Ch, Qr), never uppercased. */
.mk-fold__syms, .mk-symcase { text-transform: none; letter-spacing: .02em; }
.mk-fold__title { grid-area: title; align-self: start; font: var(--w-h3) var(--t-h4)/1.25 var(--f-sans); text-wrap: balance; }
.mk-fold__sum .nx-faq__sign { grid-area: sign; }
.mk-fold__sum:focus-visible { outline-offset: -2px; }
.mk-fold__body { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-2) 0 var(--s-5); }
.mk-fold__body > div { display: grid; gap: 2px; }
.mk-fold__body dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.mk-fold__body dd { margin: 0; max-width: var(--measure); line-height: 1.5; }
.mk-fold__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-5); }
@media (hover: hover) { .mk-fold__sum:hover { background: var(--bg-2); padding-left: var(--s-3); } }
@media (min-width: 1024px) {
	.mk-iv { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
	.mk-iv__list { grid-column: 1 / span 6; }
	.mk-iv__viewer {
		display: block;
		grid-column: 8 / -1;
		position: sticky;
		top: calc(var(--header-h) + var(--s-6));
		aspect-ratio: 4 / 5;
		overflow: hidden;
		clip-path: var(--clip-sheet);
		background: var(--bg-2);
	}
	.mk-iv__frame { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, -100% 100%, -100% 100%); transition: clip-path 480ms var(--ease-cut); }
	.mk-iv__frame.is-active { z-index: 1; clip-path: polygon(0 0, 200% 0, 100% 100%, -100% 100%); }
	html.rm .mk-iv__frame { transition: none; }
	.mk-iv__frame .nx-media { height: 100%; }
	.mk-fold__sum { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "meta sign" "title sign"; }
	.mk-fold__thumb { display: none; }
	.mk-iv__ai { display: none; }
}
html:not(.js) .mk-iv__frame:not(:first-child) { display: none; }

/* ---- forms: one step that the success state replaces ---------------------------------------- */
.mk-step { display: grid; gap: var(--s-4); }
.mk-step[hidden] { display: none; }
/* The Sector Playbook form (hub s10, Lab s7): email + sector side by side from tablet up. */
.mk-pbform { max-width: none; gap: var(--s-4); }
.mk-pbform__fields { display: grid; gap: var(--s-4) var(--gutter); }
@media (min-width: 768px) { .mk-pbform__fields { grid-template-columns: 1.2fr 1fr; } }
.nx-form__success .nx-stamp { justify-self: start; color: var(--fg); } /* the stamp's ink text vanished on Indigo */

/* ---- section heads ------------------------------------------------------------------------ */
.mk-sechead-sub { margin-top: var(--s-5); max-width: var(--measure-lead); }

} /* end @layer pages */