/* =========================================================================
   netex · pages/frame-hunt.css · /marketing/frame-hunt/ (bible §7.12)
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 hero + game --------------------------------------------------------------- */
.fh-hero { min-height: 0; }
.fh-hero .ff { margin-top: 0; }
.fh-hero .ff__intro { display: grid; gap: var(--s-4); align-content: start; }
.fh-hero .nx-crumbs { margin-bottom: var(--s-2); }
.fh-hero .nx-eyebrow { margin-bottom: 0; }
.fh-title { display: grid; font-size: var(--t-display); max-width: 15ch; }
.fh-title__l1 { --flar: 100; --volm: 100; font-variation-settings: "FLAR" var(--flar), "VOLM" var(--volm); }
.fh-title .nx-h1-sub { max-width: 30ch; }
.fh-hero .nx-lead { max-width: 46ch; }
.fh-prize { font: var(--w-h3) var(--t-body)/1.45 var(--f-sans); color: var(--fg); max-width: 46ch; }
.fh-announce {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	max-width: 52ch;
	padding: var(--s-3) var(--s-4);
	border: var(--bw) solid var(--rule);
	font: 500 .8125rem/1.5 var(--f-mono);
	color: var(--fg);
}
.fh-announce__mark { width: 10px; height: 10px; flex: none; align-self: center; background: var(--cyan); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.fh-howto { font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); max-width: 52ch; }
.fh-stat { margin-top: 0; }
.fh-below { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.fh-words.is-visible { flex: 1 1 100%; background: var(--bg-2); }


/* ---- s3 decode ------------------------------------------------------------------------ */
.fh-decode .nx-grid { row-gap: var(--s-7); align-items: start; }
.fh-decode__fact { display: grid; gap: var(--s-4); max-width: 30ch; }
.fh-decode__fact .mk-art { max-width: 180px; }
.fh-decode__fact .nx-voice { font-size: var(--t-lead); line-height: 1.4; }
@media (min-width: 1024px) {
	.fh-decode__sheet { grid-column: 1 / span 8; }
	.fh-decode__fact { grid-column: 10 / -1; padding-top: var(--s-8); }
}

/* ---- s4 story -------------------------------------------------------------------------- */
.fh-story .nx-grid { row-gap: var(--s-6); align-items: start; }
.fh-story__strip { max-width: 360px; color: var(--ink); }
/* Phones and tablets: the strip is a margin drawing above the chapters, not a screen of its own. */
@media (max-width: 1023px) { .fh-story__strip { max-width: min(230px, 58vw); justify-self: end; } }
.fh-story__title { font-size: var(--t-h2); }
.fh-story__client { margin-top: var(--s-4); font: 500 .8125rem/1.5 var(--f-mono); color: var(--fg-2); }
.fh-chapters { margin: var(--s-6) 0 0; padding: 0; list-style: none; max-width: var(--measure-long); font-family: var(--f-serif); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.62; }
.fh-chapter { position: relative; padding: var(--s-5) 0 var(--s-5) var(--s-6); border-top: var(--bw) solid var(--rule); }
.fh-chapter::before { content: ""; position: absolute; left: 0; top: calc(var(--s-5) + .45em); width: 14px; height: 10px; border: var(--bw) solid var(--fg-2); }
.fh-chapter.is-coupon::before { border: 2px solid var(--molten); }
.fh-chapter__title { font-family: var(--f-sans); font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; margin-bottom: var(--s-2); }
.fh-chapter__rule { margin-top: var(--s-4); font-style: italic; font-size: 1.15em; line-height: 1.45; color: var(--fg); padding-left: var(--s-4); border-left: var(--bw-2) solid var(--fg); }
@media (min-width: 1024px) {
	.fh-story__strip { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.fh-story__text { grid-column: 5 / -1; }
}

/* ---- s6 why: four frames of one film strip (perforated edges, frame lines between) ---------------- */
.fh-strip { margin-top: var(--s-2); padding: var(--s-2) 0; border-block: var(--bw-2) solid var(--fg); color: var(--fg); }
.fh-strip__perf { display: block; width: 100%; height: 12px; color: var(--fg-2); }
.fh-reasons { display: grid; gap: 0; margin: var(--s-2) 0; padding: 0; list-style: none; border-block: var(--bw) solid var(--rule); }
.fh-reason { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) var(--s-5); border-top: var(--bw) solid var(--rule); }
.fh-reason:first-child { border-top: 0; }
.fh-reason__art { width: 56px; color: var(--ink); }
.fh-reason__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; max-width: 22ch; }
.fh-reason p { max-width: 42ch; }
@media (min-width: 768px) {
	.fh-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fh-reason { border-top: 0; border-left: var(--bw) solid var(--rule); }
	.fh-reason:nth-child(odd) { border-left: 0; }
	.fh-reason:nth-child(n+3) { border-top: var(--bw) solid var(--rule); }
}
@media (min-width: 1280px) {
	.fh-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fh-reason:nth-child(odd) { border-left: var(--bw) solid var(--rule); }
	.fh-reason:first-child { border-left: 0; }
	.fh-reason:nth-child(n+3) { border-top: 0; }
}

/* ---- s7 lineage ---------------------------------------------------------------------------- */
.fh-lineage__foot { margin-top: var(--s-8); row-gap: var(--s-4); }
.fh-lesson { font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; }
.fh-lnote { font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); max-width: 52ch; }
@media (min-width: 1024px) {
	.fh-lesson { grid-column: 1 / span 6; }
	.fh-lnote { grid-column: 8 / -1; align-self: end; }
}

/* ---- s9 guardrails ----------------------------------------------------------------------------- */
.fh-guard .nx-grid { row-gap: var(--s-6); align-items: start; }
.fh-guard__tnc { margin-top: var(--s-5); max-width: 40ch; font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
@media (min-width: 1024px) {
	.fh-guard__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.fh-guard__list { grid-column: 6 / -1; }
}

/* ---- s10 bridge ---------------------------------------------------------------------------------- */
.fh-bridge .nx-grid { row-gap: var(--s-7); align-items: center; }
.fh-bridge__text { display: grid; gap: var(--s-5); align-content: start; }
.fh-bridge__text .nx-eyebrow { margin-bottom: 0; }
.fh-bridge__flow { margin: 0; max-width: 560px; color: var(--paper); }
.fh-bridge__flow .mk-node--human { stroke: var(--paper); stroke-width: 2; }
@media (min-width: 1024px) {
	.fh-bridge__text { grid-column: 1 / span 6; }
	.fh-bridge__flow { grid-column: 7 / -1; }
}
/* The ratchet arrows tick on in 4 steps (pages/marketing-shared.js animates .mk-ratchet paths with steps). */

/* ---- s11 cta --------------------------------------------------------------------------------------- */
.fh-cta .nx-grid { row-gap: var(--s-7); align-items: end; }
.fh-related .nx-index__title { font-size: 1.0625rem; }

} /* end @layer pages */