/* Not found page (tools/genNotFound.mjs). Tokens only. The pictures are svg[data-ill]: every moving part rests in
   its final pose and animates only while the picture has .is-playing (assets/illustrations.js), so without the
   script, under reduced motion and in the still copy each picture stands complete. */

/* ── The frames: the screen at 1280 x 800 on a desktop (zoom 0.66), the tablet beside it ── */
.nf-devices { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.nf-devices__desk .device--desktop { width: max-content; aspect-ratio: auto; zoom: 0.66; }
.nf-devices__desk .device__screen { width: 1280px; height: 800px; overflow: hidden; }
.nf-devices__tab .device--tablet { zoom: 0.28; }
.nf-devices__tab .device__screen { overflow: hidden; }

/* ── The screen ── */
.nf-root {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-page);
  color: var(--color-foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.nf-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--size-header); padding: 0 var(--space-8); flex: none; }
.nf-brand { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.nf-mark { height: 26px; width: auto; color: var(--color-primary); }
.nf-avatar { display: grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-strong); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.nf-body { position: relative; flex: 1; min-height: 0; }
.nf-scene { min-width: 0; min-height: 0; }

.nf-msg { position: relative; display: flex; flex-direction: column; gap: var(--space-3); max-width: 440px; }
.nf-msg__code { margin: 0; font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); color: var(--color-primary); }
.nf-msg__title { margin: 0; font-size: calc(var(--text-figure) * 1.25); line-height: calc(var(--leading-figure) * 1.25); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.nf-msg__text { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); color: var(--color-muted); }
.nf-msg__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.nf-btn { gap: var(--space-2); text-decoration: none; }

/* Survey stake: the scene fills the screen, the words on its sky at the left */
.nf-root--stake .nf-scene { position: absolute; inset: 0; }
.nf-root--stake .nf-msg { position: absolute; left: calc(var(--space-12) + var(--space-4)); top: var(--space-12); }
/* Site gate: the words at the left, the scene on the right, its left edge fading into the page */
.nf-root--gate .nf-body { display: grid; grid-template-columns: 520px minmax(0, 1fr); }
.nf-root--gate .nf-msg { grid-column: 1; grid-row: 1; align-self: center; padding-left: calc(var(--space-12) + var(--space-4)); }
.nf-root--gate .nf-scene { grid-column: 2; grid-row: 1; -webkit-mask-image: linear-gradient(to right, transparent, var(--color-foreground) 16%); mask-image: linear-gradient(to right, transparent, var(--color-foreground) 16%); }
/* Map pin: the map fills the screen, the words on a card at the left */
.nf-root--pin .nf-scene { position: absolute; inset: 0; }
.nf-root--pin .nf-msg { position: absolute; left: calc(var(--space-12) + var(--space-4)); top: 50%; transform: translateY(-50%); padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-default); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); }
/* Planning notice: the scene above, the words below, centred */
.nf-root--notice .nf-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding-bottom: var(--space-12); }
.nf-root--notice .nf-scene { width: 720px; max-width: 100%; aspect-ratio: 640 / 360; }
.nf-root--notice .nf-msg { align-items: center; text-align: center; }
.nf-root--notice .nf-msg__actions { justify-content: center; }

/* On a tablet the picture stands above the words, or the card sits at the foot of the map */
@container (max-width: 900px) {
  .nf-root--stake .nf-scene { top: 34%; }
  .nf-root--stake .nf-msg { left: var(--space-10); right: var(--space-10); top: var(--space-10); }
  .nf-root--gate .nf-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .nf-root--gate .nf-scene { grid-column: 1; grid-row: 1; -webkit-mask-image: none; mask-image: none; }
  .nf-root--gate .nf-msg { grid-column: 1; grid-row: 2; padding: var(--space-10); max-width: none; }
  .nf-root--pin .nf-msg { left: var(--space-8); right: var(--space-8); top: auto; bottom: var(--space-8); transform: none; max-width: none; }
}

/* ── The pictures ── */
.nf-svg { display: block; width: 100%; height: 100%; }
.nf-k { stroke: var(--ill-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nf-thin { stroke-width: 1.5; }
.nf-thick { stroke-width: 4; }
.nf-thick2 { stroke-width: 2.5; }
.nf-f { fill: var(--ill-fill); }
.nf-o { fill: var(--ill-soft); }
.nf-a { fill: var(--ill-accent); }
.nf-g { fill: var(--ill-ground); }
.nf-w { fill: var(--ill-warm); }
.nf-n { fill: none; }
.nf-ka { stroke: var(--ill-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 10; }
.nf-hill { opacity: 0.7; }
.nf-cloud { opacity: 0.6; }
.nf-faint { opacity: 0.4; }
.nf-sun { opacity: 0.85; }
.nf-num { font-family: var(--font-mono); font-weight: var(--weight-semibold); fill: var(--ill-line); letter-spacing: 0.02em; }
.nf-num--ground { opacity: 0.55; }
.nf-dash { stroke-width: 2; stroke-dasharray: 8 8; }
.nf-rows { stroke-width: 1; opacity: 0.35; }
.nf-river { fill: none; stroke: var(--ill-accent); stroke-width: 8; stroke-linecap: round; opacity: 0.3; }
.nf-road { fill: none; stroke: var(--ill-fill); stroke-width: 12; stroke-linecap: round; }
.nf-road--edge { stroke: var(--ill-line); stroke-width: 16; opacity: 0.35; }
.nf-shadow { fill: var(--ill-line); opacity: 0.2; }
.nf-line-bar { fill: var(--ill-line); }
.nf-text-bar { fill: var(--ill-line); opacity: 0.3; }
.nf-tie { fill: none; stroke: var(--ill-accent); stroke-width: 4; stroke-linecap: round; }

/* The moving parts, in their final pose */
.nf-stake__post, .nf-peg, .nf-pin__drop { transform-box: fill-box; transform-origin: 50% 100%; }
.nf-ribbon { transform-box: fill-box; transform-origin: 0% 50%; }
.nf-gate__leaf { transform-box: fill-box; transform-origin: 0% 50%; transform: scaleX(0.5) skewY(9deg); }
.nf-shadow, .nf-ring { transform-box: fill-box; transform-origin: 50% 50%; }
.nf-ring { fill: none; stroke: var(--ill-accent); stroke-width: 2.5; }
.nf-ring--1 { transform: scale(1.5); opacity: 0.35; }
.nf-ring--2 { transform: scale(2.3); opacity: 0.15; }
.nf-sheet { transform-box: fill-box; transform-origin: 50% 0%; }
.nf-curl { transform-box: fill-box; transform-origin: 100% 100%; }

/* Survey stake: once, the stake drops in, the pegs stand up, the boundary marches round; then the ribbon lifts */
.nf-stake.is-playing .nf-stake__post { animation: nf-drop calc(var(--duration-slow) * 2.5) var(--ease-standard) backwards; }
.nf-stake.is-playing .nf-boundary { animation: nf-march calc(var(--duration-slow) * 7) var(--ease-standard) calc(var(--duration-slow)) backwards; }
.nf-stake.is-playing .nf-peg { animation: nf-pop calc(var(--duration-slow) * 1.5) var(--ease-standard) backwards; }
.nf-stake.is-playing .nf-peg--1 { animation-delay: calc(var(--duration-slow) * 1.5); }
.nf-stake.is-playing .nf-peg--2 { animation-delay: calc(var(--duration-slow) * 3); }
.nf-stake.is-playing .nf-peg--3 { animation-delay: calc(var(--duration-slow) * 4.5); }
.nf-stake.is-playing .nf-peg--4 { animation-delay: calc(var(--duration-slow) * 6); }
.nf-stake.is-playing .nf-ribbon { animation: nf-flutter calc(var(--duration-drift) * 0.5) var(--ease-drift) calc(var(--duration-slow) * 2.5) infinite; }
.nf-stake.is-playing .nf-ribbon__tail { transform-box: fill-box; transform-origin: 0% 50%; animation: nf-flutter calc(var(--duration-drift) * 0.4) var(--ease-drift) calc(var(--duration-slow) * 3) infinite reverse; }
@keyframes nf-drop {
  0% { transform: translateY(-90px); opacity: 0; }
  20% { opacity: 1; }
  60% { transform: translateY(6px) scaleY(0.97); }
  80% { transform: translateY(-3px); }
  100% { transform: none; }
}
@keyframes nf-march { 0% { stroke-dashoffset: 240; opacity: 0; } 15% { opacity: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes nf-pop { 0% { transform: scaleY(0); opacity: 0; } 60% { transform: scaleY(1.1); opacity: 1; } 100% { transform: none; } }
@keyframes nf-flutter {
  0%, 100% { transform: none; }
  25% { transform: rotate(-7deg) skewY(-4deg); }
  50% { transform: rotate(3deg) scaleX(0.94); }
  75% { transform: rotate(-3deg) skewY(2deg); }
}

/* Site gate: once, the gate swings open from shut, overshoots a little and settles */
.nf-gate.is-playing .nf-gate__leaf { animation: nf-swing calc(var(--duration-slow) * 7) var(--ease-standard) calc(var(--duration-slow) * 1.5) backwards; }
@keyframes nf-swing {
  0% { transform: none; }
  15% { transform: scaleX(0.98) skewY(0.5deg); }
  65% { transform: scaleX(0.44) skewY(10deg); }
  82% { transform: scaleX(0.54) skewY(8.5deg); }
  100% { transform: scaleX(0.5) skewY(9deg); }
}

/* Map pin: once, the pin drops onto the unmarked field and settles; then the ripple spreads, slowly, on a loop */
.nf-pin.is-playing .nf-pin__drop { animation: nf-pin-drop calc(var(--duration-slow) * 3) var(--ease-standard) calc(var(--duration-slow)) backwards; }
.nf-pin.is-playing .nf-shadow { animation: nf-shadow calc(var(--duration-slow) * 3) var(--ease-standard) calc(var(--duration-slow)) backwards; }
.nf-pin.is-playing .nf-ring { animation: nf-ripple calc(var(--duration-slow) * 9) var(--ease-drift) calc(var(--duration-slow) * 3) infinite backwards; }
.nf-pin.is-playing .nf-ring--2 { animation-delay: calc(var(--duration-slow) * 7.5); }
@keyframes nf-pin-drop {
  0% { transform: translateY(-320px); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translateY(0) scale(1.08, 0.88); }
  72% { transform: translateY(-18px) scale(0.98, 1.02); }
  88% { transform: translateY(0) scale(1.02, 0.97); }
  100% { transform: none; }
}
@keyframes nf-shadow { 0% { transform: scale(0.3); opacity: 0; } 55% { transform: scale(1.2); } 72% { transform: scale(0.8); } 100% { transform: none; } }
@keyframes nf-ripple { 0% { transform: scale(0.5); opacity: 0; } 10% { opacity: 0.7; } 100% { transform: scale(3.4); opacity: 0; } }

/* Planning notice: the paper sways from its tie, its lower corner lifting and falling, on a gentle loop */
.nf-notice.is-playing .nf-sheet { animation: nf-paper calc(var(--duration-drift) * 0.75) var(--ease-drift) infinite; }
.nf-notice.is-playing .nf-curl { animation: nf-curl calc(var(--duration-drift) * 0.75) var(--ease-drift) infinite; }
@keyframes nf-paper {
  0%, 100% { transform: none; }
  30% { transform: skewX(-2.5deg) scaleY(0.985); }
  55% { transform: skewX(1.5deg); }
  80% { transform: skewX(-1deg) scaleY(0.99); }
}
@keyframes nf-curl { 0%, 100% { transform: none; } 30% { transform: scale(1.8); } 55% { transform: scale(0.6); } 80% { transform: scale(1.3); } }

/* ── Under each variant: what moves, the replay, the still picture ── */
.nf-about { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
.nf-about__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.nf-about__label { margin: 0; }
.nf-about__text .t-body { margin: 0 0 var(--space-2); }
.nf-still { height: 180px; overflow: hidden; background: var(--color-page); border: 1px solid var(--color-default); border-radius: var(--radius-card); }
@media (max-width: 900px) { .nf-about { grid-template-columns: minmax(0, 1fr); } }