/* 404 (Prompt 17 Part C). Figma desktop 1518:52936 (1440), tablet 2304:93640 (744), phone 2304:130613 (390, app view).
   Centred column: gold number (accent/default), H1, copy, Back to home (Primary Large) + Search Storied (Secondary Large),
   quick links (Ghost Small). Phone text styles come from tokens.css (the type scale switches under 600). */
.not-found{
  --not-found-copy-w: 560px;   /* not a Figma token yet: copy width on desktop */
  --not-found-title-w: 900px;  /* not a Figma token yet: title width on desktop */
  display:flex;flex-direction:column;align-items:center;gap:var(--space-24);text-align:center;box-sizing:border-box;max-width:1440px;margin:0 auto;
  padding:calc(var(--nav-h,120px) + var(--space-96)) var(--space-112) var(--space-160)}
.not-found__code{margin:0;font:var(--text-9xl);color:var(--accent-default)}
.not-found__title{margin:0;max-width:var(--not-found-title-w);font:var(--text-5xl);text-transform:uppercase;color:var(--text-primary)}
.not-found__text{margin:0;max-width:var(--not-found-copy-w);font:var(--text-lg);color:var(--text-secondary)}
.not-found__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-12)}
.not-found__links{padding-top:var(--space-16)}
.not-found__links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-8)}

/* Tablet (600–1023, Figma 744): 80 top / 32 sides / 96 bottom; number Desktop/02, title Desktop/06 */
@media (max-width:1023px){
  .not-found{padding:calc(var(--nav-h,120px) + var(--space-80)) var(--space-32) var(--space-96)}
  .not-found__code{font:var(--text-8xl)}
  .not-found__title{font:var(--text-4xl)}
  .not-found__text{max-width:none}   /* tablet copy runs the full 680 (one line in Figma) */
}

/* Phone (<600, Figma 390): 56 top / 16 sides / 64 bottom, 16 between; number Mobile/01, title Mobile/05; buttons stacked full width
   (8 apart); quick links wrap and centre, 4 apart */
@media (max-width:599px){
  .not-found{gap:var(--space-16);padding:var(--space-56) var(--space-16) var(--space-64)}
  .not-found__code{font:var(--text-9xl)}
  .not-found__title{font:var(--text-5xl)}
  .not-found__actions{flex-direction:column;align-self:stretch;gap:var(--space-8)}
  .not-found__actions .btn{width:100%}
  .not-found__links{padding-top:var(--space-8)}
  .not-found__links ul{gap:0 var(--space-4)}
}