.not-found { display: grid; gap: clamp(var(--space-block), 8vw, calc(var(--space-block) * 2)); }

.not-found__hero { display: grid; gap: calc(var(--space-layout) + var(--measure-md)); }
.not-found__intro { display: grid; gap: var(--measure-lg); max-width: 820px; }
.not-found__intro .lede { max-width: 40ch; }

.not-found__box { padding: var(--measure-2xl); }
.not-found__label { margin: 0 0 var(--measure-md) var(--measure-md); color: var(--color-muted); }
.not-found__arrow { position: absolute; right: 120px; top: -170px; width: 160px; height: 150px; color: var(--color-primary); pointer-events: none; }
.not-found__arrow svg { width: 100%; height: 100%; overflow: visible; }
.not-found__arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }

.not-found__situations { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--measure-2xs); }
.not-found__situation {
  display: flex; gap: var(--measure-sm); align-items: flex-start; min-height: 44px; padding: var(--measure-md);
  border-radius: var(--radius-sm); text-decoration: none; transition: background 0.2s;
}
.not-found__situation:hover { background: var(--color-tint); }
.not-found__num {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-tint); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); transition: background 0.2s, color 0.2s;
}
.not-found__situation:hover .not-found__num { background: var(--color-primary); color: var(--color-on-primary); }
.not-found__situation strong { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.not-found__situation small { display: block; font-size: var(--text-xs); color: var(--color-muted); line-height: var(--leading-snug); }

.not-found__band {
  --band-rule: 1px solid color-mix(in srgb, var(--color-on-primary) 28%, transparent);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--measure-3xl) var(--space-panel-lg); padding: var(--space-panel-lg);
}
.not-found__emails-label { margin-bottom: var(--measure-xs); color: var(--color-tint-on-dark); }
.not-found__emails { list-style: none; border-top: var(--band-rule); }
.not-found__emails li { border-bottom: var(--band-rule); }
.not-found__email { display: flex; align-items: center; justify-content: space-between; gap: var(--measure-xl); min-height: 76px; padding-block: var(--measure-sm); text-decoration: none; }
.not-found__email strong { display: block; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.01em; }
.not-found__email strong + span { display: block; margin-top: var(--measure-2xs); font-size: var(--text-sm); color: var(--color-on-primary-soft); }
.not-found__email:hover .arrow-dot { transform: rotate(-45deg); background: var(--color-accent); color: var(--color-on-accent); }

.not-found__stuck {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--measure-xl);
  padding: calc(var(--text-sm) * var(--leading-snug) + var(--measure-xs)) 0 0 var(--space-panel-lg);
  border-left: var(--band-rule);
}
.not-found__stuck div { display: grid; gap: var(--measure-xs); }
.not-found__stuck p { font-size: var(--text-lg); color: var(--color-on-primary-soft); }

@media (max-width: 1200px) {
  .not-found__arrow { right: 48px; top: -44px; width: 48px; height: 45px; }
}

@media (prefers-reduced-motion: no-preference) {
  .not-found__arrow path { animation: doodle-draw 1.1s 0.7s cubic-bezier(0.6, 0, 0.2, 1) both; }
}

@media (max-width: 960px) {
  .not-found__band { grid-template-columns: minmax(0, 1fr); padding: var(--measure-2xl) var(--measure-lg); }
  .not-found__stuck { padding: 0; border-left: 0; }
  .not-found__stuck .btn { align-self: stretch; }
}

@media (max-width: 600px) {
  .not-found__box { padding: var(--measure-lg) var(--measure-xs) var(--measure-xs); }
  .not-found__label { margin: 0 0 var(--measure-xs) var(--measure-sm); }
  .not-found__situation { padding: var(--measure-sm); }
  .not-found__email { min-height: 72px; gap: var(--measure-md); }
  .not-found__email strong { font-size: var(--text-lg); }
}